CSS媒体查询

我正在尝试改编我的平板电脑网络应用程序以便在手机上使用。媒体查询功能看起来很完美，我最初的测试证明了这一点。我的问题是：手机和平板电脑的方向从纵向改为横向（设备旋转时），最大宽度指的是什么？CSS媒体查询

换句话说，更大的Android手机的分辨率与480x800相当，iPhone4的分辨率为640x960，原始黑莓手机的分辨率为360x480。当设备处于纵向模式时，这些都是分辨率（宽x高），因此宽度分别为400,640和360。但是，当您将设备旋转到横向时，高度'变为'用于显示目的的宽度。因此，景观中的有效宽度分别变为800,960和480，而800和960的宽度与平板宽度的宽度重叠，从而使显示器混乱。

那么，宽度总是宽度？也就是说，当设备报告其尺寸时，宽度值是否始终与CSS目的保持一致，或者当设备旋转到横向时宽度值是否更改？

感谢大家提前。

来源

2012-01-21 robert smith

当然，它刚刚改变了人们的方式可以改变在PC上的屏幕分辨率？ –

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

如果您想查询是否该设备在横向或纵向模式下使用，您可以使用方向属性，而不是：

@media screen and (orientation: portrait) { 
}

这将检查如果浏览器窗口的宽度比越大高度（方向：风景将会相反）。为了获得最佳结果，您可能需要使用'and'运算符来结合使用多个MQ属性来链接测试。即：

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

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

来源

2012-01-23 19:06:00 1nfiniti

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

感谢您的答案，他们帮助。 –

当手机或平板电脑旋转时，css的值会根据手机的风景变化或不变，因为移动电话上显示的宽度和高度发生变化。所以当你定义css风格来定位你想要的东西时你必须具体。

@media（最小宽度：700像素）和（方向：横向）{

}

用于媒体查询详细理解访问：http://letsdopractice.com/css-media-queries/

来源

2015-05-21 18:09:42

-5

的媒体查询被用来定义风格针对不同的屏幕尺寸。我会告诉你关于媒体查询的基本知识。 CSS媒体查询的语法是：

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

有关详细的有关媒体查询语法toturial请访问This Site

来源

2015-12-29 15:01:57 Sajid

这不是问题的答案。 – jcaron

我给了一个普遍的答案。这可能对其他人有帮助。 – Sajid

回答

相关问题