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

Question

我有以下疑问：

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

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

问候

J.P

Answer 1

1） 好吧，是的，在大多数情况下确实如此，请考虑以下示例：

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

现在，您的样式仅在屏幕400px宽或更窄时应用。设备是纵向还是横向模式并不重要。

但是在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

Answer 2

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

据我所知，计算机不会呈现布局模式。

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

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

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