css - 有人可以解释 CSS 媒体查询吗？

Question

我在css3.info阅读了关于它们的文章，但我觉得它解释得不够好。我也无法让他们的示例随着我的屏幕尺寸而改变。我尝试在 Safari、FF、Chrome 中使用。

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

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

Answer 1

应用于屏幕尺寸的规则意味着，引用 W3C 规范“如果视口的宽度在指定的约束条件下，则可在屏幕和手持设备上使用”。

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

如果要在视口小于 1024px 时调整样式，可以使用以下规则：

@media screen and (max-width: 1024px) { … }

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

Answer 2

当在大于 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">

::结合媒体查询

Answer 3

要查看不同媒体查询对调整大小或方向更改的反应，请尝试此页面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们如何影响页面。

Answer 4

以下是一些解决此问题的项目，它们处于动态 CSS 和屏幕尺寸的最前沿：

• 320及以上：

  “320 及以上”通过使用小屏幕的样式表作为起点来防止移动设备下载桌面资产。

• 少框架：

  Less Framework 是一个用于设计自适应网站的 CSS 网格系统。它包含 4 个布局和 3 组排版预设，所有这些都基于一个网格。