媒体查询捕捉平板电脑画像

Question

我有以下规则：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

@media only screen and (min-width : 321px) /* Smartphones (landscape) */

@media only screen and (max-width : 320px) /* Smartphones (portrait) */

@media only screen and (min-width: 768px) /* tablets and desktops */

如何在不影响其他规则的情况下捕捉平板画像？

Answer 1

在设备像素宽度方面，“平板电脑画像”没有标准。

@media orientation查询根本不是很可靠，也没有得到广泛的支持。See here.你最好使用min-width和max-width媒体查询，并尝试让它在所有可能的宽度上工作，而不是以特定的方向为目标。这就是响应式设计应该是如何工作的。

纵向模式平板电脑的宽度一般在768px到~960px之间。

Answer 2

@media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)

除了指定最小宽度和最小高度外，还应该指定最大宽度和最大高度，并将其与方向相结合，这样您就可以在不影响平板电脑或pc等其他设备的情况下赶上手机，现在只有最小宽度的手机也会影响所有实现该最小宽度的设备

Answer 3

用于在平板电脑中隐藏东西的Pure CSS has helper classes。

平板电脑使用的媒体查询如下：

@media (min-width: 768px) and (max-width: 979px)

您也可以尝试将(orientation:portrait)添加到其中。

(如http://yui.yahooapis.com/pure/0.3.0/pure.css所示)