[Résolu] @media avec ou sans screen ?

bwbk

31 Dec 2017 à 14:17

Hello,

J'utilise par habitude

@media screen and (min-width:320px){…}

en regardant des saucisses alsaciennes KNACSS, j'ai vu que screen était sans doute facultatif.
Ça me semblait logique de mettre screen, mais ça me semble aussi logique de le supprimer.
Quelqu'un connait l'historique de cette pratique, est-ce problématique pour certains navigateurs ?

Raphael

Administrateur

2 Jan 2018 à 09:01

Hello bwbk,

Techniquement, il y a une différence entre :

@media screen and (min-width: 320px){…}

et :

@media (min-width: 320px){…}

La première condition cible uniquement les écrans dont la fenêtre mesure au moins 320px.

La seconde cible tous les médias dont la fenêtre mesure au moins 320px. Cela inclus donc potentiellement autre chose que des écrans (dans la vraie vie, cela ne risque que de concerner les imprimantes également).

Si la seconde version a été choisie dans KNACSS, c'est :
1- parce qu'en pratique, elle ne devrait poser aucun souci, sauf si les styles ne doivent surtout pas s'appliquer à l'impression
2- parce que jusque là, "tout le monde" pensait qu'il était obligatoire d'ajouter un type de média tel que "screen" (bref, pour faire réfléchir les gens Smiley cligne

)
3- ... parce que c'est plus court ! Smiley langue

bwbk

3 Jan 2018 à 15:22

Merci Raphaël !
Faudrait faire un test d'impression (un pdf via Aperçu), si un pt = px, 320pt ~ 11,2cm.
J'ai utilisé une seule fois « @media print » dans un projet, le navigateur se débrouille bien par défaut.

Web Mobile et responsive web design

[Résolu] @media avec ou sans screen ?