English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les requêtes média CSS vous permettent de formatter un document pour qu'il soit affiché correctement sur différents appareils de sortie de taille différente.
Les requêtes média vous permettent de personnaliser la manière dont une page Web est affichée pour une gamme spécifique d'appareils (par exemple, des téléphones, des tablettes, des ordinateurs de bureau, etc.) sans modifier les balises. Les requêtes média se composent de types de média et de zéro ou plusieurs expressions conditionnelles qui correspondent à des fonctionnalités spécifiques du média (par exemple, la largeur de l'appareil ou la résolution de l'écran).
Les requêtes média étant des expressions logiques, elles peuvent être interprétées comme true ou false. Si le type de média spécifié dans la requête média correspond au type d'appareil affichant le document et que toutes les expressions de la requête média sont satisfaites, le résultat de la requête est true. Lorsque la requête média est true, les feuilles de style ou les règles de style pertinents sont appliqués à l'appareil cible. Voici un exemple simple de requête média standard d'appareil.
/* Smartphones (en mode portrait et paysage) ---------- */
@media screen and (min-largeur: 320px) et (max-largeur: 480px){
/* styles */
}
/* Smartphones (en mode portrait) ---------- */
@media screen and (max-largeur: 320px){
/* styles */
}
/* Smartphones (en mode paysage) ---------- */
@media screen and (min-largeur: 321px){
/* styles */
}
/* Tablettes, iPad (en mode portrait et paysage) ---------- */
@media screen and (min-largeur: 768px) et (max-largeur: 1024px){
/* styles */
}
/* Tablettes, iPad (en mode portrait) ---------- */
@media screen and (min-largeur: 768px){
/* styles */
}
/* Tablettes, iPad (en mode paysage) ---------- */
@media screen and (min-largeur: 1024px){
/* styles */
}
/* Ordinateurs de bureau et portables ---------- */
@media screen and (min-largeur: 1224px){
/* styles */
}
/* Écrans de grande taille ---------- */
@media screen and (min-largeur: 1824px){
/* styles */
}Tester pour voir‹/›Astuce :Les requêtes média sont une excellente méthode pour créer des conceptions réactives. En utilisant les requêtes média, vous pouvez personnaliser le site Web pour les utilisateurs qui naviguent sur des smartphones ou des tablettes et autres appareils sans modifier le contenu réel de la page.
Vous pouvez utiliser les requêtes CSS média pour modifier la largeur de la page Web et les éléments connexes pour offrir aux utilisateurs la meilleure expérience de visualisation sur différents appareils.
Les règles de style suivantes modifieront automatiquement la largeur de l'élément conteneur en fonction de la taille de l'écran ou de la vue portée. Par exemple, si la largeur de la vue portée est inférieure768pixels, elle couvrira la largeur de la vue portée100%, si elle est supérieure768pixels mais inférieur1024pixels, alors750 pixels, et ainsi de suite.
.container {
margin: 0 auto;
background: #f2f2f2;
boîte-taille de boîte: bordure-boîte;
}
/* Téléphones mobiles (portrait et paysage) ---------- */
@media screen and (max-largeur: 767px){
.container {
largeur: 100%;
marge intérieure: 0 10px;
}
}
/* Tablettes et iPad (portrait et paysage) ---------- */
@media screen and (min-largeur: 768px) et (max-largeur: 1023px){
.container {
largeur: 750px;
marge intérieure: 0 10px;
}
}
/* Ordinateurs de bureau et portables basse résolution ---------- */
@media screen and (min-largeur: 1024px) {
.container {
largeur: 980px;
marge intérieure: 0 15px;
}
}
/* Ordinateurs de bureau et portables haute résolution ---------- */
@media screen and (min-largeur: 1280px) {
.container {
largeur: 1200px;
marge intérieure: 0 20px;
}
}Tester pour voir‹/›Attention :Vous pouvez utiliser CSS sur l'élément3 Ajustement de la taille de la boîtePropriétés pour créer des agencements plus intuitifs et plus flexibles.
Vous pouvez également utiliser les requêtes médiatiques CSS pour rendre votre agencement multicolumnes plus adaptatif, et avec très peu de personnalisations, il peut répondre aux appareils.
Si la taille de l'viewport est supérieure ou égale à768pixels, les règles de style suivantes créeront un agencement en deux colonnes, mais si inférieur ou égal à768pixels, ils seront présentés comme un agencement en colonnes.
.colonne {
largeur: 48%;
marge intérieure: 0 15px;
boîte-taille de boîte: bordure-boîte;
fond: #93dcff;
flottant: gauche;
}
.container .colonne:first-enfant{
marge-droite: 4%;
}
@media screen and (max-largeur: 767px){
.colonne {
largeur: 100%;
marge intérieure: 5px 20px;
flottant: none;
}
.container .colonne:first-enfant{
marge-droite: 0;
marge-bas: 20px;
}
}Tester pour voir‹/›