Medienabfragen für Tablet Min-Auflösung und Max-Auflösung

Question

Derzeit arbeiten auf einer Responsive Design-Website. Ich verwende die Medienabfrage zum Targeting verschiedener Geräte basierend auf der Breite und der Bildschirmauflösung.

1. Ich habe ein Szenario, wo ich die Bildschirmauflösung verwenden wollte, um die Geräte zu zielen, aber ich verstehe nicht, wie das funktioniert.

2. Ich wollte sowohl min-width als auch max-width überprüfen, wobei die Bildschirmauflösung auch von 97dpi bis hin zu iPad max. Auflösung 264dpi reichen kann. Aber das scheint nicht zu funktionieren. Wenn ich eine einzelne Auflösung min-width: 155dpi für hp geladene Tablette gibt es funktioniert. Aber minimale bis maximale Auflösung scheint nicht zu funktionieren. Kannst du deine Idee teilen?

Hierfür habe ich wie der Code unten

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

Answer 1

Die resolution Medienabfrage doesn't have good support in webkit browsers yet so können Sie mehr Erfolg mit device-pixel-ratio stattdessen verwendet.

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

So können wir Ihre Medien Abfrage mit resolution für diesen Browser neu formulieren, die es (Firefox, Internet Explorer 9 +, Opera) zu verstehen und device-pixel-ratio für alle Dinge webkit (Chrome, Safari, iOS und 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) {} 

Answer 2

Diese MQs werden die voreingestellten Einstellungen im Windows8.1 Simulator Griff:

@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; 
    } 
} 

Answer 3

Ac Cording zu älterer Messung von Quircksmode http://quirksmode.org/tablets.html

jedoch

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

, funktioniert das nicht am besten für neuere Tabletten Ich denke, da mein Telefon 37em oder mehr hat.

Was:

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