有人可以解释一下CSS媒体查询吗?

JD *_*cks 7 css css3 media-queries

我在css3.info上阅读了关于它们的文章,但我觉得它不能很好地解释它.我也无法通过屏幕尺寸改变他们的示例.我在Safari,FF,Chrome中尝试过.

这是一个尚未准备好实现的功能吗?

如果我想在浏览器窗口宽度小于1024px时调整某些样式.我怎样才能做到这一点?

mam*_*moo 6

应用于屏幕大小的规则意味着,如果视口的宽度在指定的约束中,则引用W3C规范"可在屏幕和手持设备上使用".

http://www.w3.org/TR/css3-mediaqueries/

如果要在视口小于1024px时调整样式,可以使用此规则:

@media screen and (max-width: 1024px) { … }
Run Code Online (Sandbox Code Playgroud)

无论如何,此规则仅适用于视口实际大小.如果在不重新加载页面的情况下调整视口大小,则不会应用样式.

  • 实际上,这适用于chrome,它正在更新样式,因为我调整视图端口大小而不重新加载!:) (2认同)
  • 它实际上适用于除IE之外的所有浏览器 (2认同)