CSS 平板电脑最小分辨率和最大分辨率的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15924032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media queries for tablet min-resolution and max-resolution
提问by PCA
Currently working on a responsive design website. I use media query for targeting different devices based on the width and screen resolution.
目前正在开发一个响应式设计网站。我使用媒体查询根据宽度和屏幕分辨率定位不同的设备。
I have a scenario were i wanted to use the screen resolution to target the devices, but i don't understand how this works.
I wanted to check both min-width and max-width, with that the screen resolution may also range from 97dpi to ipad max resolution 264dpi. But this does not seems to work. If i give a single resolution min-width:155dpi for hp loaded tablet it works. But min to max resolution condition seems not working. Could you guys share your idea.
我有一个场景，我想使用屏幕分辨率来定位设备，但我不明白这是如何工作的。
我想检查最小宽度和最大宽度，屏幕分辨率也可能从 97dpi 到 ipad 最大分辨率 264dpi。但这似乎不起作用。如果我为 hp 加载的平板电脑提供单个分辨率 min-width:155dpi 它可以工作。但是最小到最大分辨率条件似乎不起作用。大佬能不能分享一下你的想法。
For this i have used like the below code
为此，我使用了如下代码
@media only screen and (min-width:768px)
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){
回答by thefrontender
The resolutionmedia query doesn't have good support in webkit browsers yetso you may have more success using device-pixel-ratioinstead.
该resolution媒体查询没有在WebKit浏览器很好的支持还使您可以使用获得更大的成功device-pixel-ratio，而不是。
http://bjango.com/articles/min-device-pixel-ratio/
http://bjango.com/articles/min-device-pixel-ratio/
So we can restate your media query using resolutionfor those browsers that understand it (Firefox, IE9+, Opera), and device-pixel-ratiofor all things webkit (Chrome, Safari, iOS and Android):
因此，我们可以使用resolution能够理解它的浏览器（Firefox、IE9+、Opera）以及device-pixel-ratio所有 webkit（Chrome、Safari、iOS 和 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) {}
回答by Aleksandr Gembinski
These MQs will handle the preset settings in the Windows8.1 simulator:
这些 MQ 将处理 Windows8.1 模拟器中的预设设置：
@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;
}
}
回答by Mladen Adamovic
According to older measurement by Quircksmode http://quirksmode.org/tablets.html
根据 Quirksmode http://quirksmode.org/tablets.html 的旧测量
@media screen and (min-width: 37em) {
}
however, this doesn't work best for newer tablets I guess, since my phone has 37em or more.
但是，我猜这对于较新的平板电脑来说效果不佳，因为我的手机有 37em 或更多。
What about:
关于什么：
@media screen and (min-width: 42em) {
}
