CSS媒体查询

Question

我正在尝试为手机调整我的平板电脑网络应用程序。媒体查询功能似乎非常完美，我的初步测试也证实了这一点。但我有一个问题：当手机和平板电脑从纵向旋转到横向时（设备旋转时），max-width指的是什么？

换句话说，更大的Android手机的分辨率大约为480x800，iPhone4的分辨率为640x960，原始的Blackberry Torch的分辨率为360x480。这些都是设备处于纵向模式下的分辨率（宽x高），因此宽度分别为400、640和360。然而，当你将设备旋转到横向时，高度“变成”显示目的的宽度。因此，在横向模式下，有效宽度分别变为800、960和480，而800和960的宽度与平板电脑横向宽度重叠，这会导致显示问题。

那么，宽度始终是宽度吗？也就是说，当设备报告其尺寸时，CSS用途的宽度值是否始终保持不变，还是当设备旋转到横向时，宽度值也会改变？

谢谢大家提前回答。

- robert smith

---

它肯定只是改变人们在PC上更改屏幕分辨率的方式吧？ - Nathan MacInnes

Answer 1

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

如果您想查询设备是处于横屏模式还是竖屏模式，可以使用orientation属性：

@media screen and (orientation: portrait) {
}

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

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

完整的 MQ 属性列表可以在这里查看。

- 1nfiniti

---

另一个可能会有帮助的观点是 - width 实际上是浏览器窗口的宽度。device-width 是设备屏幕的宽度。当设备翻转时，宽度和设备宽度都会改变，但 device-width 计算的是屏幕的宽度，而 width 则计算浏览器视口（屏幕减去滚动条或浏览器菜单栏）的区域。 - 1nfiniti

Answer 2

CSS的值会根据其所在的横竖屏环境或手机是否旋转而变化，因为手机或平板电脑在旋转时，显示器的宽度和高度也会发生变化。因此，在定义CSS样式时，必须要明确指定目标。

@media(min-width: 700px) and (orientation: landscape){}

想要了解更多关于媒体查询的详细信息，请访问：http://letsdopractice.com/css-media-queries/

- Jay Patel