CSS media queries, la densité de pixel, de bureau et les appareils mobiles

Situation :
J'ai 5 fichiers CSS:

  • de base.css avec certains styles qui s'appliquent partout
  • 339px.css pour des largeurs allant jusqu'à 339px
  • 639px.css pour des largeurs allant jusqu'à 639px
  • 999px.css et
  • bigscreen.css pour rien au-dessus de 999px largeur

Code :

<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:    0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />

Cela est bel et bon et se comporte parfaitement sur n'importe quel appareil, où 1 css pixel est égal à 1/96 de pouce (2,54 cm) sur l'écran de l'appareil. Récemment, cependant, de nombreux dispositifs d'affichage ont des densités de pixels beaucoup plus élevés, de sorte qu'ils s'appliquent, par exemple, le 639px.css lors de la 339px.css serait approprié. C'est un problème, que le contenu regarder façon trop petit.

Notez également que je ne peux pas utiliser le JavaScript et les ordinateurs de bureau devaient toujours obtenir le fichier css correspondant en fonction de la largeur, indépendamment de l'orientation.

Ce que je cherche à atteindre:

  • 339px.css pour n'importe quel appareil avec:
    • une largeur <=339px
    • une haute résolution, mais un petit écran (par exemple mon smartphone android avec 1280x720 mais 5.7" écran) et en orientation portrait.

Bascially au lieu de pixel css, je veux un appareil qui est relatif à la densité de pixels de l'appareil (Bureau, tablette, smartphone, écrans 4k, "Retina" s'affiche, vous voyez l'idée) et fonctionne avec tous les principaux navigateurs mobiles et plates-formes de bureau.

En même temps, j'ai aussi besoin d'un secours à la css de pixels pour les anciens navigateurs.

Il m'a donné un mal de tête important d'arriver à cela. Comme je le comprends, vous pouvez utiliser le device-pixel-ratio, mais je n'ai pas réussi à ne pas prendre les fichiers css de "chevauchement" à un certain point (un domaine où les deux fichiers css sont actifs, par exemple 339px.css et 639px.css).

Je suis à bout de ressources. J'ai essayé une combinaison de min-width, max-width, device-pixel-ratio, orientation: portrait/landscape requête des médias, mais cela a échoué en raison du fait que les ordinateurs de bureau ignorer l'orientation. Jusqu'à présent, je ne pouvais pas obtenir un résultat positif à travers les dispositifs, même si je n'ai pas écouté la prise en charge du navigateur exigence.

OriginalL'auteur Anpan | 2013-11-12