Introduction aux media queries en CSS

Il existe une commande spéciale @media, qui permet d'exécuter du code différent en fonction de la largeur de l'écran.

Dans l'exemple suivant, un certain code s'exécutera si la largeur de l'écran est comprise entre 300px et 1200px :

@media (min-width: 300px) and (max-width: 1200px) {
	/* un certain code */
}

Dans l'exemple suivant, un certain code s'exécutera si la largeur de l'écran est supérieure à 300px :

@media (min-width: 300px) {
	/* un certain code */
}

Dans l'exemple suivant, un certain code s'exécutera si la largeur de l'écran est inférieure à 1200px :

@media (max-width: 1200px) {
	/* un certain code */
}

Écrivons dans notre media query un peu de code. Par exemple, pour certaines tailles d'écran, colorons les paragraphes en rouge :

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

Maintenant, colorons les paragraphes en différentes couleurs en fonction de la largeur de l'écran :

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

Que le code suivant s'applique sur un écran d'une largeur de 0 à 800px :

p {
	font-size: 20px;
}

Et que le code suivant s'applique sur un écran d'une largeur de 800px et plus :

p {
	font-size: 30px;
}

Que le code suivant s'applique sur un écran d'une largeur de 0 à 500px :

p {
	font-size: 15px;
}

Que le code suivant s'applique sur un écran d'une largeur de 500px à 900px :

p {
	font-size: 20px;
}

Que le code suivant s'applique sur un écran d'une largeur de 900px et plus :

p {
	font-size: 30px;
}