Pourquoi préciser le média « screen » dans les media queries ?

Les tutoriels sur les « medias queries » suggèrent souvent une syntaxe comme celle-ci :

@media screen and (max-width: 1000px) {
}

Mais pourquoi faudrait-il préciser le média “screen” dans les media queries ? C’est une vraie question car je n’ai lu aucune justification.

Pour mes sites, j’ai pris le parti de ne pas le mettre car le média d’impression (“print”) a besoin des mêmes ajustements dépendants de la largeur de la zone d’impression.

Mais plus généralement, si une feuille de styles est incluse dans le HTML pour tous les types de médias (media="all"), il semblerait cohérent que les ajustements selon les largeurs de médias s’appliquent également à tous les médias.

Toutefois un changement d’unité de mesure s’impose car la notion de pixel (px) est fortement dépendante du média écran. On utilisera plutôt le cadratin (em) afin de travailler relativement à la taille des caractères de texte. Pour convertir les pixels de nos écrans habituels en em, il faut diviser par 16.

La média query ressemble alors à cela :

@media (max-width: 62.5em) {
}

Et cet usage est à mon avis à recommander pour les feuilles de styles qui s’appliquent à tous les médias.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « m1h2SB » dans le champ ci-dessous :