Responsive design : les media queries CSS 3 à l'honneur Syntaxe des media queries

Nous sommes prêts à aborder la syntaxe générale des media queries. Voici donc la liste des mots-clés que nous utiliserons pour élaborer les conditions correspondant aux sélection recherchées.

Le préfixe min- ou max-, placé devant le nom de la caractéristique, signale une valeur minimale ou maximale. Par exemple, la condition width se décline en min-width et max-width.

Conditions utilisées dans les media queries CSS 3
Mots-clésSignificationUtilisation
Source : Eyrolles
all, screen, handheld, tv, projection, 3d-glasses print, braille, embossed, tty, speech only screen, only handheld...Tous les terminaux (all), écrans d'ordinateur (screen), d'appareil mobile (handheld), écrans de télévision (tv), projecteurs (projection), lunettes 3D (3d-glasses) Impression (print), écran tactile et impression en braille (braille et embossed), imprimante à caractères fixes (tty), synthétiseur vocal pour la lecture sonore des pages (speech)Pour les écrans, la condition handheld étant peu prise en compte, c'est surtout screen qui sera utilisé. only screen cible un navigateur qui reconnaît la syntaxe complète des media queries CSS 3, car screen seul existe en CSS 2, d'où une possible reconnaissance partielle de la condition.
width: ... height: ...Largeur (width) ou hauteur (height) en pixels de la fenêtre (y compris pour une fenêtre réduite sur un ordinateur)En général, c'est la largeur qui est utilisée, avec minou max-. Exemple : min-width: 900px Attention : Beaucoup de navigateurs mobiles simulent une dimension supérieure à la réalité, puis rétrécissent la page obtenue.
device-width: ... device-height: ...Largeur (devicewidth) ou hauteur (device-height) totale en pixels du terminal utilisé (correspond à la fenêtre en plein écran)En général, c'est la largeur qui est utilisée, avec minou max-. Exemple : max-device-width: 480px
orientation: portrait orientation: landscapeType d'orientation de l'écran, en mode portrait (portrait) ou paysage (landscape)Peu utilisable, car mal pris en compte par les navigateurs mobiles.
aspect-ratio device-aspectratioRapport largeur / hauteur de la fenêtre (aspectratio) ou du terminal (device-aspectratio)Souvent du type 4/3 ou 16/9. Exemple : aspect-ratio: 16/9
colorNombre de bits utilisés pour coder chaque couleur d'un pixel (color: 0 pour un écran en noir et blanc)Exemple : min-color: 8
color-indexNombre de couleurs possibles (" nombre d'entrées dans la table des couleur ", égal à 0 si aucune table de couleurs n'est utilisée)Exemple : min-color-index: 256
monochromeNombre de bits pour coder un pixel en niveaux de gris (autant de niveaux que 2 élevé à la puissance de ce nombre de bits)Par exemple, pour 128 niveaux de gris ou plus : min-monochrome: 7
resolutionPrécision de l'impression (média print), en points par pouce (dpi, dot per inch) ou en points par centimètre (dpcm, dot per cm).Exemple : print and (min-resolution: 300dpi)
scan: progressive scan: interlacePour un média de type tv : soit progressive pour un affichage progressif des images, de la première à la dernière ligne, soit interlace pour l'entrelaçage des tubes cathodiques, avec affichage des lignes impaires puis des lignes paires.Exemple : tv and (scan: interlace)
(grid) ou grid: 0 grid: 1Une grille de caractères donc une seule police (grid ou grid: 0) ou affichage plus courant point par point donc multipolices (grid: 1)Exemple : print and (grid)


Les préfixes min- et max- peuvent s'appliquer à toutes ces conditions pour élargir leur champ d?action, exceptées les caractéristiques orientation, scan et grid.