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.
Mots-clés | Signification | Utilisation |
---|---|---|
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: landscape | Type 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-aspectratio | Rapport 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 |
color | Nombre 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-index | Nombre 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 |
monochrome | Nombre 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 |
resolution | Pré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: interlace | Pour 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: 1 | Une 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.