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

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

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

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

当前回答

在我的例子中，当浏览器有800px或更少的时候，我想把我的logo放在网站的中央，然后我使用@media标签来做到这一点:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

它为我工作，希望有人发现这个解决方案有用。更多信息请看这个。

其他回答

这就是媒体查询。它允许您将部分CSS规则仅应用于特定配置上的特定设备。

在我的例子中，当浏览器有800px或更少的时候，我想把我的logo放在网站的中央，然后我使用@media标签来做到这一点:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

它为我工作，希望有人发现这个解决方案有用。更多信息请看这个。

它说:当页面以最大1024像素宽度的分辨率呈现在屏幕上时，然后应用下面的规则。

正如你可能已经知道的，事实上你可以将一些CSS定位到一种媒体类型，可以是手持、屏幕、打印机等。

详情请看这里。

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

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

例如:

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

  }

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

推荐文章