Media-queries

Elles permettent de définir le style, en fonction du media (support) utilisé, et sont donc responsables en partie du Responsive web design.

Soit en spécifiant une feuille de style particulière de manière conditionnelle :

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

Soit en attribuant un style particulier au sein de la même feuille:

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

L'attribut media peut prendre des valeurs liées à la nature du périphérique :

• screen ⇒ écran
• print ⇒ imprimante
• handheld ⇒ périphériques mobiles ou de petite taille
• …

La plupart des attributs peuvent être préfixés par min- et max- lorsqu'ils acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.

• color ⇒ support de la couleur (bits/pixel)
• color-index ⇒ périphérique utilisant une table de couleurs indexées
• device-aspect-ratio ⇒ ratio du périphérique de sortie (par exemple 16/9)
• aspect-ratio ⇒ ratio de la zone d'affichage
• device-height ⇒ dimension en hauteur du périphérique
• device-width ⇒ dimension en largeur du périphérique
• grid ⇒ périphérique bitmap ou grille (ex : lcd)
• height ⇒ dimension en hauteur de la zone d'affichage
• monochrome ⇒ périphérique monochrome ou niveaux de gris (bits/pixel)
• orientation ⇒ orientation du périphérique (portrait ou landscape)
• resolution ⇒ résolution du périphérique (en dpi, dppx, ou dpcm)
• scan ⇒ type de balayage des téléviseurs (progressive ou interlace)
• width ⇒ dimension en largeur de la zone d'affichage

Ils permettent de combiner plusieurs conditions média :

• and ()
• only ()
• not ()

Lire Les media-queries CSS3