Media Queries

 

Media Queries CSS3(http://www.w3.org/TR/css3-mediaqueries/) est une recommandation officielle du W3C .

Les Media Queries (ou requêtes de média en français) permettent des styles CSS différents selon la taille de l'écran.

Exemple

Dans le <head>, dans un élément <link> peut être conditionné par une requête media

<link rel="stylesheet" media="screen and (max-width: 640px)" href="petitEcran.css" /> 

Le lien vers la feuille de style ne s'effectuera que pour les écrans dont la largeur n'excède pas 640 pixels

Bootstrap utilise ce type de conditionement mais à l'intérieur des fichiers css à l'aide de règle @

Exemple
@media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
}

 

 

Entrons dans le vif du Sujet

I La syntaxe des media queries

1 - Lles valeurs de l'attribut media

screen
Écrans
handheld
Périphériques mobiles ou de petite taille
print
Impression
aural (CSS 2.0) / speech (CSS 2.1)
Synthèses vocales
braille
Plages braille
embossed
Imprimantes braille
projection
Projecteurs (ou présentations avec slides)
tty
Terminal/police à pas fixe
tv
Téléviseur
all
Tous les précédents

2. Les attributs testés

La requête média peut jouer sur les attributs suivants :

  • color : Nombre de bits de couleurs du périphérique.
  • width : Largeur de la surface de rendu du périphérique de sortie.
  • height : Hauteur de la surface de rendu du périphérique de sortie.
  • device-width : Largeur physique du périphérique de sortie.
  • device-height : Hauteur physique du périphérique de sortie.
  • orientation : Orientation horizontale (landscape) ou verticale (portrait).
  • aspect-ratio : Format du périphérique. ( aspect-ration: 16/9  par exemple).
  • resolution : Résolution du périphérique de sortie.
  • device-pixel-ratio : Densité de pixels du périphérique de sortie.

4 - min- et max-

On préfixe ces attributs avec min- et max- pour définir une valeur minimale ou maximale.

5 - Les opérateurs logiques dans les requêtes

  • and 
  • only (uniquement)
  • not
  • , (la virgule s'interprète comme un 'ou' inclusif)

 

Exemple
@media screen  and (min-width: 200px) and (max-width: 640px) {
	.bloc {     
		display:block;     
		clear:both;   
	} 
}

Références

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Seriez-vous capable d'écrire les media-queries pour réaliser la page avec le comportement suivant

corrigé