CSS媒体查询

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

换句话说，更大的安卓手机的分辨率为480x800，iPhone4的分辨率为640x960，黑莓Torch的分辨率为360x480。这些是在纵向模式下保持设备时的所有分辨率（W x H），因此宽度分别为400、640和360。但是，当您将设备旋转到横向时，出于显示目的，高度“变”为宽度。因此，横向中的有效宽度分别为800、960和480，800和960宽度与平板电脑横向宽度重叠，这会弄乱显示器

那么，宽度总是宽度吗？也就是说，当设备报告其尺寸时，出于CSS目的，宽度值始终保持不变，还是当设备旋转到横向时宽度值会发生变化

---

提前感谢大家。

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

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

@media screen and (orientation: portrait) {
}

这将检查浏览器窗口的宽度是否大于高度（方向：横向则相反）。为了获得最佳结果，您可能需要使用多个MQ属性的组合，并使用“and”操作符进行链测试。i、 e:

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

---

MQ属性的完整列表可用。

当手机或平板电脑旋转时，手机上显示的宽度和高度会发生变化，css的值会根据手机上的横向或非横向而变化。因此，在定义css样式时，您必须针对您想要的样式

@介质（最小宽度：700px）和（方向：横向）{

}

---

有关媒体查询的详细信息，请访问：

媒体查询用于定义不同屏幕大小的样式。我将告诉你们有关媒体查询的基本知识。 CSS媒体查询的语法为：

@media not|only mediatype and (media feature) {
CSS-Code;
}

---

有关media query syntax toturial的详细信息，请访问

它肯定会改变人们在PC上更改屏幕分辨率的方式？另一个可能有用的点是，宽度实际上是浏览器窗口的宽度。device width是设备屏幕的宽度。当设备翻转时，宽度和设备宽度都会改变，但设备宽度计算屏幕的宽度，而宽度计算浏览器视口的面积（屏幕减去滚动条或浏览器的菜单栏）。感谢您的回答，他们提供了帮助。这不是问题的答案。我给出了一个一般性的答案。这可能对其他人有帮助。