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

标签 css media-queries

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

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

如果我想在浏览器窗口宽度小于1024px时调整一些样式。我该怎么做?

最佳答案

应用于屏幕尺寸的规则意味着,引用 W3C 规范“如果视口(viewport)的宽度在指定的约束范围内,则可在屏幕和手持设备上使用”。

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

如果你想在视口(viewport)小于 1024px 时调整样式你可以使用这个规则:

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

无论如何,这条规则只适用于视口(viewport)的实际大小。如果您在不重新加载页面的情况下调整视口(viewport)大小,则不会应用样式。

关于css - 有人可以解释一下 CSS 媒体查询吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3619217/

相关文章:

html - 将较小的元素符号与较大的文本垂直对齐

javascript - 如何在 HighCharts 中使用@Media Query

html - CSS 媒体查询的精确 NOT(逆)

html - 调整屏幕大小时如何重新排序 flex 元素?

jquery - 如何使用 jQuery 根据查询字符串更改 CSS 属性值

Jquery FullCalendar - 修复标题

html - 在 Google Cloud Storage 上托管 HTML5 网站

javascript - CSS :x scroll limit

javascript - 使用 css 关闭 javascript?

css - 媒体查询不适用于 dc.js 图表