@media屏幕和（最大宽度：1024像素）在CSS中是什么意思？

我在继承的CSS文件中找到了这段代码，但是我觉得毫无意义：

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

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

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

此媒体查询中的测试是：

1. @media screen—浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是台式机类，而不是例如较旧的手机浏览器（请注意，iPhone和其他智能手机浏览器确实将自己标识为屏幕类别）或屏幕阅读器，并且该浏览器正在显示屏幕上的页面，而不是打印页面。

2. max-width: 1024px—浏览器窗口（包括滚动条）的宽度为1024像素或更小。（CSS像素，而不是设备像素。）

第二项测试表明，此举旨在将CSS限制为iPad，iPhone和类似设备（因为某些旧版浏览器不支持max-width媒体查询，并且许多台式机浏览器的运行宽度超过1024像素）。

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

这是Media Queries规范，很容易阅读：

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

它限制了屏幕上定义的样式（例如，不打印或其他介质），并且进一步将范围限制为宽度小于或等于1024像素的视口。

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

它说：当页面以最大1024像素的宽度分辨率在屏幕上呈现时，请遵循以下规则。

您可能实际上已经知道，您可以将某些CSS定位到一种媒体类型，该媒体类型可以是手持设备，屏幕，打印机等之一。

看看这里的细节..

就我而言，我想在浏览器800px不多的情况下将徽标放在网站的中心，然后使用@media标记来做到这一点：

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

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

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

这意味着，如果屏幕大小为1024，则仅适用于CSS规则。

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

max-width 是您达到该宽度之前的最大CSS限制。

同样值得一提的是，您可以同时使用'em'和'px'-博客和基于文本的网站都可以这样做，因为浏览器随后会根据文本内容做出布局决策。

在Wordpress 26上，我希望我的标语既可以在手机上也可以在台式机上显示，所以我将其放在子主题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，在这种情况下，我们的程序必须执行此部分。