我在css3.info阅读了关于它们的文章,但我觉得它解释得不够好。我也无法让他们的示例随着我的屏幕尺寸而改变。我尝试在 Safari、FF、Chrome 中使用。
这是一个尚未准备好实现的功能吗?
如果我想在浏览器窗口宽度小于 1024px 时调整一些样式。我怎样才能做到这一点?
我在css3.info阅读了关于它们的文章,但我觉得它解释得不够好。我也无法让他们的示例随着我的屏幕尺寸而改变。我尝试在 Safari、FF、Chrome 中使用。
这是一个尚未准备好实现的功能吗?
如果我想在浏览器窗口宽度小于 1024px 时调整一些样式。我怎样才能做到这一点?
应用于屏幕尺寸的规则意味着,引用 W3C 规范“如果视口的宽度在指定的约束条件下,则可在屏幕和手持设备上使用”。
http://www.w3.org/TR/css3-mediaqueries/
如果要在视口小于 1024px 时调整样式,可以使用以下规则:
@media screen and (max-width: 1024px) { … }
无论如何,此规则仅适用于视口的实际大小。如果您在不重新加载页面的情况下调整视口大小,则不会应用样式。
当在大于 800 像素宽的屏幕上显示时将样式表应用到文档:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
当在任何小于 400 像素宽的设备上显示时将样式表应用到文档:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
里面
@media all and (max-width:800px) {
body { color: red; }
}
苹果手机
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
::结合媒体查询
要查看不同媒体查询对调整大小或方向更改的反应,请尝试此页面上的演示:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
您可以调整媒体查询属性以了解它们如何影响页面。