web-dev-qa-db-fra.com

Y a-t-il un moyen d'utiliser DPI dans les requêtes de média CSS au lieu de px

Le nombre de pixels largeur et la hauteur ne raconte pas toujours toute l'histoire. Cela fonctionne bien pour ajouter ou supprimer des articles de l'écran, mais n'est pas tout à fait juste pour définir la bonne image. Avec l'écran de rétine sur le MBP, une fenêtre de navigateur définie sur la moitié de l'écran aurait le même nombre de pixels de largeur que la plupart des machines aujourd'hui. Pourtant, les images affichées seraient probablement trop petites, étant donné le DPI supérieur.

Existe-t-il un moyen de changer d'images en fonction de DPI plutôt que du nombre de pixels largeur et de hauteur?

cssmedia-queries
18
Dennis Burton

Vous pouvez faire soit:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>

ou

@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
 /*use CSS to swap out your low res images with high res ones here*/
}
20
Moin Zaman

Ce que vous cherchez, c'est le rapport de pixel de l'appareil. Parce que des choses comme l'iPhone présentent un écran de 320px mais avec une disposition de 640px (rapport pixel de 2). Dans les requêtes de média, utilisez "Device-Pixel-Ratio". Bien que je voudrais toujours utiliser les préfixes du fournisseur.

Un bon post sur celui-ci: http://menacingcloud.com/?c=highpixeldensitydisplay

2
Jay Harris

Il y a aussi <img srcset> et -webkit-image-set Fonction CSS, mais elles ne semblent être prises en charge que par Safari/Chrome/Opera. Exemple:

<img src="image.png" srcset="image-1x.png 1x, 
     image-2x.png 2x, image-3x.png 3x">

background-image:  -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
);

Je ne sais pas si les exemples de la réponse acceptée par Moin Zaman travaillent sur IE/Firefox. Probablement "la résolution mineure" doit être utilisée:

@media only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx)
1
Czarek Tomczak

En 2019, vous pouvez utiliser une requête multimédia pour la résolution, la résolution mineure, la résolution max dans tous les navigateurs modernes, sauf safari:

@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

Voir https://developer.mozilla.org/en-us/docs/web/css/@media/resolution

0
bjelli