TODO: multicolumn est bien supporté maintenant TODO: parler de span pour grid pour les L1 ?
Arrivée de l'iPhone, puis des autres smartphones, puis des tablettes : les sites web doivent s'adapter à de multiples tailles d'écran
En parallèle, taille et définition des écrans d'ordinateur augmente
Il n'est plus pertinent de proposer une « version mobile » et une « version desktop » de son site web…
un seul site, qui doit s'adapter à toutes les possibilités
@media (max-width: 800px) { p { background: black; color: yellow; } }
@media
contient des règles CSS !Les propriétés sont de la forme critère: valeur
color
, color-index
, monochrome
device-height
, device-width
, device-aspect-ratio
, resolution
height
, width
, orientation
, aspect-ratio
La plupart des critères peuvent prendre les opérateurs
min-
et max-
Par exemple, min-width: 400px
signifie « largeur supérieure à 400px »
(autrement dit, la largeur minimale pour laquelle la propriété s'applique est 400px)
@media type and (propriété) and (propriété) etc.
Attention aux espaces et parenthèses : seul le type n'est pas entouré de parenthèses
Types : screen
, print
,braille
,
embossed
, aural
…
all
, ou alors ne pas mettre de type du tout
@media all and (min-height: 200px) @media (min-height: 200px)Les deux requêtes précédentes sont équivalentes.
Si la requête commence par not
, elle est inversée :
@media not screen and (max-width: 60em)
est appliquée si le média n'est pas
un écran de moins de 60em (donc elle s'applique par exemple à l'impression et aux écrans de plus de 60em)
@media (max-width: 300px), not print and (color), screen and (min-resolution: 300dpi)
En pratique, on ne va quasiment utiliser que max-width
et min-width
Si on met des media queries un peu partout dans son CSS et dans plusieurs sens (max/min), impossible de s'y retrouver !
On va plutôt avoir un CSS de base, modifié ensuite avec des requêtes média — si possible dans une seule direction
Soit on part de la version mobile et on fait des modifications pour des largeurs de plus en plus grandes, soit l'inverse
/* version par défaut: sur grand écran */
.menu { width: 30em; /* etc. */ }
/* écran plus petit: on passe le menu en horizontal */
@media (max-width: 100em) {
.menu { width: 100%; }
.menu li { display: inline-block; }
/* etc. */
}
/* écran encore plus petit: on cache le menu */
@media (max-width: 50em) {
.menu { display: none; }
}
Remarque : on peut aussi utiliser les media queries dans l'attribut media
de l'élément link
, pour choisir quelle feuille de style charger
<link rel="stylesheet" media="print" href="print.css" />
<link rel="stylesheet" media="screen" href="all_screens.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)"
href="small_screens.css"
/>
meta
:
<meta name="viewport" content="initial-scale=1" />
<meta name="viewport" content="initial-scale=1, width=device-width" />mais a priori ça n'apporte rien de plus que
initial-scale=1
(et ça pourrait
même poser des problèmes pour les appareils en mode paysage ?), à tester… — quelques détails<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0" />Très déconseillé (sauf si vous savez ce que vous faites) : la possibilité de zoomer est indispensable pour l'accessibilité !
@viewport
en CSS, où ça en est ?max-width
et min-width
body
ne fasse jamais plus de 60 em de large :
body { max-width: 60em; }ou pour que le menu fasse 30% de la largeur de l'écran, mais ne soit ni trop petit ni trop grand :
#menu { width: 30%; max-width: 50em; min-width: 10em; }ou pour que les images ne dépassent jamais de leur conteneur (et donc ne soient jamais plus larges que l'écran) :
img { max-width: 100%; }
max-width
gagne contre width
mais perd contre min-width
calc()
permet d'utiliser le résultat
d'un calcul (pas trop compliqué) comme valeur d'une propriété.bidule { width: calc(100%/3 - 200px - 2*10em); }
pt
: point, utilisé pour les médias destinés à l'impressionin
: pouce (2,54cm, 1/72in = 1pt)px
: pixel = 1/96 in (un pixel CSS peut recouvrir plusieurs pixels de l'écran)mm
, cm
em
: taille dépendant de la police de caractères.%
: relatif au bloc parent (par ex. taille de la police du bloc parent, largeur du bloc parent)rem
, correspond à la valeur font-size
de l'élément racinevw
: 1% de la largeur courante de la fenêtre (viewport width)vh
: 1% de la hauteur courante de la fenêtre (viewport height)vmin
: correspond au plus petit entre vw
et vh
vmax
: correspond au plus grand entre vw
et vh
vw
vaut 12 pixelsvw
et des vh
partout à la place des px
ou des em
srcset
pour img
, donne les URL de plusieurs images, avec des informations
<img srcset="normal.jpg 1x, hd.jpg 2x"
src="normal.jpg" alt="Texte alternatif" />
<img srcset="petite.jpg 400w, moyenne.jpg 800w, grande.jpg 1200w"
src="moyenne.jpg" alt="Texte alternatif" />
1x
, 2x
: indique la résolution. Adapté pour
les images de taille fixe.350w
: indique la largeur de l'image en pixels. Adapté
pour les images dont la taille dépend de celle de l'écran.picture
, permet de choisir l'image chargée en fonction de media queries
<picture>
<source media="(min-width: 36em)" srcset="img/ethiopian-wolf.jpg" />
<source srcset="img/ethiopian-wolf_icon.jpg" />
<img src="img/ethiopian-wolf.jpg" alt="Another reddish wolf" />
</picture>
srcset
, pour pouvoir adapter à la fois
le design et la résolutionem
(ou des rem
), ce qui est conseillé, alors il faut aussi utiliser des em
dans
les media queries ! Encore une fois, on veut adapter le contenu à l'espace disponible, pas au type d'appareil.em
et rem
ont le même effet dans les media queries (leur taille en pixel ne dépend que de la taille de police fixée par le navigateur, pas celle du CSS)…