2.1 Notions de base des requêtes media
Les requêtes media (media queries) sont l'un des outils clés pour créer des sites web responsives. Elles permettent d'adapter les styles aux différents appareils et tailles d'écran, garantissant ainsi un affichage optimal et une utilisation confortable. Ci-dessous, nous allons examiner les bases de l'utilisation des requêtes media, leur syntaxe, ainsi que des exemples d'adaptation des styles pour différents écrans.
Les requêtes media utilisent la règle @media, qui permet d'appliquer certains styles uniquement si des conditions spécifiées sont remplies. Les conditions peuvent inclure la taille de l'écran, la résolution, l'orientation et d'autres paramètres.
Syntaxe :
@media media-type and (media-feature) {
/* styles */
}
Où :
media-type: le type de media pour lequel les styles seront appliqués. Le plus souvent, on utilise screenmedia-feature: les caractéristiques du media, telles que la largeur, la hauteur, l'orientation, etc.
Exemple :
- Dans cet exemple, l'arrière-plan de la page deviendra bleu clair si la largeur de l'écran ne dépasse pas 768 pixels.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Types de requêtes media
1. Requêtes par largeur et hauteur
Ces requêtes media permettent de modifier les styles en fonction de la largeur et de la hauteur de la fenêtre d'affichage.
Exemples :
/* Appliquer des styles si la largeur de l'écran est inférieure ou égale à 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Appliquer des styles si la hauteur de l'écran est supérieure à 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientation
Les requêtes par orientation de l'écran permettent d'adapter les styles en fonction de l'appareil en mode portrait (portrait) ou paysage (landscape).
Exemples :
/* Appliquer des styles pour l'orientation portrait */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Appliquer des styles pour l'orientation paysage */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Résolution
Les requêtes media par densité de pixels permettent d'adapter les styles pour les appareils avec différentes densités de pixels, comme les écrans Retina.
Exemples :
/* Appliquer des styles pour les écrans avec une densité de pixels de 2x et plus */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Appliquer des styles pour les écrans avec une densité de pixels inférieure à 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Combinaison de requêtes media
Les requêtes media peuvent être combinées à l'aide des opérateurs logiques and, not et only.
Exemples
Utilisation de l'opérateur and :
/* Appliquer des styles pour les appareils avec une largeur d'écran entre 600px et 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Utilisation de l'opérateur not :
/* Appliquer des styles pour tous les appareils sauf ceux avec une largeur d'écran inférieure à 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Utilisation de l'opérateur only :
/* Appliquer des styles uniquement pour les écrans */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION