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

Question

我希望有人可以测试几种不同的平板电脑，或者具有广泛理论知识的人可以告诉我我针对常见平板电脑尺寸(取自: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; }

}

Answer 1

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

查看my database of media features并尽力而为。

也就是说，Lokase 的答案是最好的。不要尝试针对设备，尝试让您的网站在所有分辨率下都很好。它并不那么复杂。