常见平板电脑尺寸的 CSS 媒体查询答案

【问题标题】：CSS Media Queries for Common Tablet Sizes常见平板电脑尺寸的 CSS 媒体查询
【发布时间】：2012-09-06 11:41:05
【问题描述】：

我希望有几个不同的平板电脑可供测试，或者具有广泛的理论知识的人可以告诉我我针对常见平板电脑尺寸的查询（取自：http://nmsdvid.com/snippets/）是否有效。

我的主要问题是运营商（特别是针对 4 种不同设备之一）是否正确；

@media only screen and (
    ((min-device-width : 768px) and (max-device-width : 1024px)),
    ((min-device-width : 600px) and (max-device-width : 1024px)),
    ((min-device-width : 800px) and (max-device-width : 1080px)),
    ((min-device-width : 800px) and (max-device-width : 1280px))
) and (orientation : landscape) {

    body{ background-color: pink; }

}

【问题讨论】：

看看这个：css-tricks.com/snippets/css/media-queries-for-standard-devices
谢谢，那是我的出发点，但现在有很多平板电脑，其中很多没有与 iPad 相同的设备宽度......所以我想知道我的语法将作为更强大的平板电脑目标器工作:)。

标签： css media-queries tablet

【解决方案1】：

很遗憾，您的问题没有答案。只是因为“常见平板电脑尺寸”这个问题没有答案。您会发现旧笔记本电脑比当前的平板电脑更窄，而分辨率比上网本更宽的平板电脑。

查看my database of media features 并努力做到最好。

也就是说，Lokase 的答案是最好的。不要尝试以设备为目标，尝试使您的网站在所有分辨率下都很好。并不复杂。

【讨论】：

【解决方案2】：

我发现的最佳方法是使用与设备无关的响应式布局方法。

为一个范围设置媒体查询（即 - 将覆盖您所定位的所有平板电脑的尺寸），然后使用流畅的方法将 UI 扩展或收缩到设备的尺寸。

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

每天都有如此多的设备涌入市场，尝试专门针对每个人是一场失败的战斗。

【讨论】：