CSS 媒体查询答案

【问题标题】：CSS Media QueriesCSS 媒体查询
【发布时间】：2012-02-15 21:57:43
【问题描述】：

我正在尝试调整我的平板电脑网络应用程序以在手机上使用。媒体查询功能似乎很完美，我的初步测试证明了这一点。我的问题是：对于将方向从纵向更改为横向（在设备旋转时）的手机和平板电脑，那么 max-width 指的是什么？

换句话说，更大的 Android 手机的分辨率为 480x800，iPhone4 的分辨率为 640x960，而原始的 Blackberry Torch 的分辨率为 360x480。这些是设备处于纵向模式时的所有分辨率 (W x H)，因此宽度分别为 400、640 和 360。但是，当您将设备旋转为横向时，出于显示目的，高度“变为”宽度。因此横向的有效宽度分别变为 800、960 和 480，并且 800 和 960 的宽度与平板电脑的横向宽度重叠，从而使显示混乱。

那么，宽度总是宽度吗？也就是说，当设备报告它的尺寸时，宽度值是否始终保持不变以用于CSS目的，或者当设备旋转到横向时宽度值会改变？

提前感谢大家。

【问题讨论】：

肯定会改变人们在 PC 上更改屏幕分辨率的方式？

标签： css media-queries

【解决方案1】：

当设备翻转时，宽度值会发生变化，因为正在查看的页面的宽度也在变化。

如果要查询设备是在横向还是纵向模式下使用，可以使用orientation属性代替：

@media screen and (orientation: portrait) {
}

这将检查浏览器窗口的宽度是否大于高度（orientation:landscape 会相反）。为了获得最佳结果，您可能需要使用“and”运算符来组合使用许多 MQ 属性来链接测试。即：

@media screen and (orientation: landscape) and (max-width: 960px) {
}

完整的 MQ 属性列表可用here。

【讨论】：

另一点可能会有所帮助-宽度实际上是浏览器窗口的宽度。 device-width 是设备屏幕的宽度。设备翻转时 width 和 device-width 都会改变，但 device-width 计算屏幕的宽度，而 width 计算浏览器视口的面积（屏幕减去滚动条或浏览器的菜单栏）。
感谢您的回答，他们提供了帮助。

【解决方案2】：

随着手机或平板电脑旋转时手机上显示的宽度和高度发生变化，css的值会根据其横向或手机上的变化而变化。因此，在定义 CSS 样式以针对您想要的内容时，您必须具体说明。

@media(min-width: 700px) 和（方向：横向）{

}

有关媒体查询的详细了解，请访问：http://letsdopractice.com/css-media-queries/

【讨论】：