CSS媒体查询 - 设备宽度 - 纵向与横向

Question

我有以下怀疑：

1）媒体查询匹配的设备宽度是否会根据模式（纵向与横向）而变化？

2）通常的笔记本电脑和台式机是否与肖像模式相匹配？对于没有屏幕旋转的设备，方向是随机/未定义的吗？或者它总是逻辑上对应于肖像（如果高度＆lt;宽度）和横向（宽度＆lt;高度）。

问候

JP

Answer 1

1） 嗯，是的，在大多数情况下，请考虑以下示例：

@media all and (max-device-width: 400px) {
    // styles here
}

现在，只有当屏幕宽400px宽或更短时，才会应用您的样式。无论设备处于纵向还是横向模式，不都很重要。

iOS中的

但，存在问题。对于iPad，设备宽度始终为320px（iPhone）或768px。因此，您需要使用orientation媒体查询，否则您将无法判断用户是否更改了方向。

2）笔记本电脑和台式机与landscape模式匹配为默认（但您可以更改浏览器manually的方向模式）。由于orientation的用例位于iOS上，因此您可以确定没有随机/未定义方向。

这是一个很好的CSS3媒体查询工具：http://cssmediaqueries.com/

更多阅读：

• http://blog.cloudfour.com/ipad-orientation-css/
• http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

我建议使用最小或最大宽度。使用设备布局可能会导致问题，因为有数十万个设备，每个设备的分辨率略有不同。

据我所知，计算机无法呈现布局模式。

@media screen and (max-width: 420px) {
//styles
}

@media screen and (min-width: 420px) {
//styles
}

最好在使用媒体查询（min-width）时使用移动优先方法，其中每个width元素都会为样式添加规则。这样可以防止重复规则和过度写入。它还允许旧浏览器优雅的浏览器回退。