Question

我在我继承的CSS文件中发现了这段代码，但我无法理解它：

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

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

Answer 1

这是一个媒体查询。除非浏览器通过它包含的测试，否则它会阻止其中的CSS运行。

此媒体查询中的测试是：

@media screen - 浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是桌面类 - 而不是例如一个旧的手机浏览器（注意iPhone和其他智能手机浏览器，做表明自己属于屏幕类别）或屏幕阅读器 - 并且它正在显示页面在屏幕上，而不是打印它。
max-width: 1024px - 浏览器窗口（包括滚动条）的宽度为1024像素或更少。（CSS pixels, not device pixels）。

第二个测试表明这是为了将CSS限制在iPad，iPhone和类似设备上（因为一些旧的浏览器在媒体查询中不支持max-width，并且许多桌面浏览器运行得更广泛超过1024像素。）

但是，它也适用于支持max-width媒体查询的浏览器中宽度小于1024像素的桌面浏览器窗口。

这是媒体查询规范，它非常易读：

Answer 2

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

Answer 3

它说：当页面在屏幕上以最大1024像素宽度的分辨率渲染时，请应用后面的规则。

正如您可能已经知道的那样，您可以将某些CSS定位到可以是手持设备，屏幕，打印机等媒体类型。

详情请查看here。

Answer 4

那是Media Queries。它允许您将部分CSS规则仅应用于特定配置的特定设备。

Answer 5

在我的情况下，当浏览器有800px或更少时，我想将我的徽标放在网站上，然后我使用@media标记执行此操作：

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

它对我有用，希望有人觉得这个解决方案很有用。 :)有关更多信息，请参阅this。

Answer 6

这意味着如果屏幕尺寸为1024，则仅适用于CSS规则以下。

Answer 7

如果您的媒体查询条件为true，则具有该条件的CSS将起作用。这意味着您的媒体查询条件像素大小中的CSS将会生效，否则如果条件失败则意味着如果设备的宽度大于1024px，那么CSS将无效。因为您的媒体查询条件为false。

max-width是你的最大CSS限制，直到该宽度。

Answer 8

另外值得注意的是，您可以使用'em'以及'px' - 博客和基于文本的网站可以使用它，因为浏览器会根据文本内容做出更多布局决策。

在Wordpress上，我想让我的标语显示在手机和桌面上，所以我把它放在我的孩子主题style.css

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

Answer 9

它针对某些指定的功能执行其他一些代码......

例如：

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

  }

上面的片段说明运行此程序的设备是否具有600px或小于600px宽度的屏幕，在这种情况下，我们的程序必须执行此部分。