CSS媒体查询 - 设备宽度 - 竖屏 vs 横屏

Question

我有以下疑问：

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

2）普通笔记本电脑和台式机是否会与纵向模式匹配？如果设备没有屏幕旋转功能，方向是随机的/未定义的吗？还是始终逻辑上对应于纵向（如果高度 < 宽度）和横向（宽度 < 高度）。

此致

JP

- workwise

Answer 1

1) 好的，在大多数情况下它确实有用，考虑以下例子：

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

现在你的样式只适用于屏幕宽度小于或等于 400px 的情况。设备处于 竖屏 或 横屏 模式并不重要。

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

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

- Hashem Qolami

Answer 2

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

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

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

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

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

- Ray