CSS RWD - Media Queries

Bienvenue, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant du Design Web Réactif (RWD) et nous concentrer sur l'un de ses outils les plus puissants : les requêtes média (Media Queries). Imaginez que vous créer une belle peinture, mais elle doit avoir l'air géniale sur une petite carte postale et un panneau publicitaire massif. C'est exactement ce que nous faisons avec les sites web, et les requêtes média sont notre pinceau magique !

Qu'est-ce que les Media Queries ?

Les requêtes média sont comme les caméléons du monde CSS. Elles permettent à votre site web de s'adapter et de changer son apparence en fonction du device sur lequel il est consulté. Que ce soit un smartphone, une tablette ou un ordinateur de bureau, les requêtes média aident à s'assurer que votre site paraît fantastique partout.

Commençons par un exemple de base :

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Dans ce code, nous disons : "Eh, navigateur, si la largeur de l'écran est de 600 pixels ou moins, peins le fond en bleu clair !" C'est comme donner à votre site web un look frais et rafraîchissant sur les petits écrans.

Propriété width des Media Queries CSS RWD

La propriété width est notre meilleur ami en matière de création de designs réactifs. Elle nous permet de définir différents styles en fonction de la largeur de l'écran du device.

Regardons un exemple plus complet :

/* Styles par défaut pour les écrans plus grands */
.container {
width: 80%;
margin: 0 auto;
}

/* Styles pour les écrans de 768px et plus petits */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* Styles pour les écrans de 480px et plus petits */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

Voici ce qui se passe :

1. Par défaut, notre conteneur est large de 80% avec un peu de marge sur les côtés.
2. Lorsque l'écran se rétrécit à 768px ou moins, nous augmentons la largeur à 95%.
3. Sur les très petits écrans (480px ou moins), nous faisons que le conteneur soit en pleine largeur.

C'est comme si votre site web faisait du yoga, se contractant et s'étirant pour s'adapter parfaitement à n'importe quel écran !

Media Queries CSS RWD avec plusieurs points de rupture

Maintenant, parlons des points de rupture. Ce sont les points où la mise en page de votre site web changera pour offrir la meilleure expérience utilisateur. Pensez-y comme les "points de rupture" où votre design doit s'adapter.

Voici un exemple utilisant plusieurs points de rupture :

/* Styles de base */
body {
font-size: 16px;
}

/* Écrans large */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* Écrans moyens */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* Écrans petits */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

Dans cet exemple, nous ajustons la taille de la police en fonction de différentes tailles d'écran :

• Sur les écrans large (1200px et plus), nous augmentons la taille de la police à 18px.
• Pour les écrans moyens (entre 992px et 1199px), nous utilisons une police de 17px.
• Sur les écrans petits (991px et moins), nous réduisons légèrement la taille de la police à 15px.

C'est comme avoir un garde-robe réactif qui s'ajuste toujours parfaitement, peu importe ce que vous avez mangé !

Utilisation de l'orientation avec les Media Queries CSS RWD

Saviez-vous que votre site web peut déterminer si un device est tenu en position portrait ou paysage ? C'est vrai, et nous pouvons utiliser cette information pour créer des designs encore plus ciblés.

Voici comment nous pouvons utiliser la fonction orientation :

/* Styles pour l'orientation portrait */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* Styles pour l'orientation paysage */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

Dans cet exemple :

• Lorsque le device est en mode portrait (plus haut que large), nous faisons que la barre latérale soit en pleine largeur et nous supprimons son flottant.
• En mode paysage, nous créons une mise en page côte à côte avec la barre latérale occupant 25% de la largeur.

C'est comme si votre site web faisait des acrobaties, se retournant entre le portrait et le paysage avec style !

Mettre tout cela ensemble

Maintenant que nous avons couvert les bases, regardons un exemple plus complexe qui combine tout ce que nous avons appris :

/* Styles de base */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* Écrans large */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* Écrans moyens */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* Écrans petits */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* Écrans très petits */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* Orientation paysage */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

Cet exemple complet montre comment nous pouvons créer un design entièrement réactif qui s'adapte à diverses tailles et orientations d'écran. Nous ajustons les tailles de police, les largeurs de conteneur, et même la mise en page en fonction des caractéristiques du device.

Conclusion

Félicitations ! Vous avez appena fait vos premiers pas dans le monde du design web réactif avec les requêtes média. Souvenez-vous, créer des sites web réactifs, c'est comme être un shapeshifter numérique - votre contenu doit avoir l'air génial peu importe sa forme.

While you practice and experiment with media queries, you'll develop an intuition for creating designs that work seamlessly across all devices. Keep exploring, keep coding, and most importantly, have fun! Your websites will thank you by looking fabulous everywhere they go.

Méthode	Description
@media screen	Cible tous les types d'écrans
max-width	Définit une condition de largeur maximale
min-width	Définit une condition de largeur minimale
orientation: portrait	Cible les devices en mode portrait
orientation: landscape	Cible les devices en mode paysage

Bon codage, et puissent vos sites web toujours être réactifs !

Credits: Image by storyset