Les Media queries pour tablette min-résolution et max-résolution

Actuellement en train de travailler sur un responsive design site web. J'utilise media query pour cibler les différents appareils en fonction de la largeur et de la résolution de l'écran.

  1. J'ai un scénario, je voulais utiliser la résolution de l'écran pour cible les appareils, mais je ne comprends pas comment cela fonctionne.
  2. Je voulais vérifier à la fois min-width et max-width, avec la résolution de l'écran peut également plage de 97dpi pour ipad résolution max 264dpi. Mais cela ne semble pas marcher. Si je donne une seule résolution min-largeur:155dpi pour hp chargé tablette, il fonctionne. Mais min à max résolution condition ne semble pas travailler. Pourriez-vous les gars part de votre idée.

Pour cela, j'ai utilisé comme le code ci-dessous

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){

OriginalL'auteur PCA | 2013-04-10

  1. 9

    La resolution media query ne pas avoir un bon support dans les navigateurs webkit encore ainsi, vous pouvez avoir plus de succès en utilisant device-pixel-ratio à la place.

    http://bjango.com/articles/min-device-pixel-ratio/

    De sorte que nous pouvons reformuler votre requête des médias à l'aide de resolution pour ces navigateurs (Firefox, IE9+, Opera), et device-pixel-ratio pour toutes les choses de webkit (Chrome, Safari, iOS et Android):

    @media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px),
       only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {}
    Je dirais (un an après que vous avez écrit ceci) que c'est un bon moment pour passer (depuis Chrome 29, nous sommes maintenant sur 34, et depuis Firefox 16, version actuelle 29). Aussi Chrome est d'encourager les gens à passer de dpi à dppx dans les messages sur la console. C'est agréable d'éviter le doublement avec le webkit préfixe trop et la rédaction d'une logique OU de la déclaration avec les media queries est difficile (bien que " ou "est notée par des virgules, vous ne pouvez pas facilement combiner un" et " et " ou " dans une instruction unique dans mon expérience).
    Modifier a parlé trop tôt - le soutien à la "résolution" encore assez horrible dans le mobile, malheureusement... 🙁

    OriginalL'auteur thefrontender

  2. 0

    Ces MQs va gérer les paramètres prédéfinis dans le Windows8.1 simulateur: 

    @media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768),
screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768),
screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080),
screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) {
body {
background-color: red !important;
}
}
@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200),
screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080),
screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) {
body {
background-color: violet !important;
}
}
@media screen and (max-resolution:  174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440)  {
body {
background-color: purple !important;
}
}

    OriginalL'auteur Aleksandr Gembinski

  3. 0

    Selon les vieilles mesure par Quircksmode
    http://quirksmode.org/tablets.html

    @media screen and (min-width: 37em) {
}

    toutefois, cela ne fonctionne pas mieux pour les nouveaux comprimés je suppose que, depuis mon téléphone a 37em ou plus.

    Ce sujet:

    @media screen and (min-width: 42em) {
}

    OriginalL'auteur Mladen Adamovic