css - 媒体查询捕获平板电脑肖像

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 媒体查询并尝试让它在所有可能的宽度下工作，而不是针对特定方向。无论如何，这几乎就是响应式设计的工作原理。

纵向模式平板电脑的宽度通常在 768 像素到 ~960 像素之间。