@media screen和(max-width: 1024px)在CSS中是什么意思?

我在继承的CSS文件中发现了这段代码，但我不能从中找到任何意义:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

具体来说，第一行发生了什么?

当前回答

这意味着如果屏幕大小是1024，那么只适用于CSS规则。

其他回答

它限制了在屏幕上定义的样式(例如，不是打印或其他媒体)，并进一步限制了宽度为1024px或更小的视口的范围。

http://www.css3.info/preview/media-queries/

这意味着如果屏幕大小是1024，那么只适用于CSS规则。

如果你的媒体查询条件为真，那么你的CSS与该条件将工作。这意味着CSS在你的媒体查询的条件像素大小将起作用，否则，如果条件将失败，这意味着如果设备的宽度大于1024px，那么你的CSS将无法工作。因为您的媒体查询条件为假。

max-width是在此宽度之前的最大CSS限制。

同样值得注意的是，你可以使用“em”和“px”——博客和基于文本的网站这样做，因为浏览器会根据文本内容做出布局决定。

在Wordpress 2016上，我想让我的标语在手机和台式机上都能显示，所以我把它放在我的child theme style.css中

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

它针对一些特定的功能来执行一些其他的代码……

例如:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

上面的代码片段说，如果运行这个程序的设备的屏幕宽度为600px或小于600px，在这种情况下，我们的程序必须执行这一部分。

推荐文章