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

EN

1)嗯，是的，在大多数情况下，考虑下面的例子：

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

现在，只有当屏幕为400px宽度或更小时，才会应用样式。无论设备是处于纵向模式还是横向模式，都无关紧要。

，但是 in iOS，有一个问题。其中，设备宽度始终为320px (iPhone)或768px (对于iPad )。因此，您需要使用orientation媒体查询，否则您将无法判断用户已更改方向。

2)笔记本电脑和台式机默认匹配landscape模式(但您可以更改浏览器的方向模式)。由于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

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

据我所知，计算机不渲染布局模式。

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

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

在使用媒体查询(min- width )时，最好使用移动优先方法，其中每个宽度元素都会向样式添加规则。这将防止重复的规则和重写。它还允许对较旧的浏览器进行优雅的浏览器回退。