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

【问题标题】：CSS Media Query - Device width - portrait vs landscapeCSS 媒体查询 - 设备宽度 - 纵向与横向
【发布时间】：2013-08-27 09:05:41
【问题描述】：

我有以下疑问：

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

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

问候

日本

【问题讨论】：

【解决方案1】：

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

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

现在您的样式仅在屏幕宽度为400px 或更小时应用。设备是 portrait 还是 landscape 模式不重要。

但是在 iOS 中，有一个问题。那里的设备宽度总是320px (iPhone) 或768px 对于iPad。所以你需要使用orientation媒体查询，否则你将无法判断用户已经改变了方向。

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

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

更多阅读：

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：