@media screen和（max-width：1024px）在CSS中是什么意思？

我在inheritance的CSS文件中find了这段代码，但我无法理解它：

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

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

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

这个媒体查询中的testing是：

@media screen – 浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是桌面级的，而不是像老式的手机浏览器（注意，iPhone和其他智能手机浏览器确实将自己定位在屏幕类别中）或屏幕阅读器 – 而且它正在显示页面在屏幕上，而不是打印它。
max-width: 1024px – 浏览器窗口（包括滚动条）的宽度为1024像素或更less。（ CSS像素，而不是设备像素）。

第二个testing表明，这是为了将CSS限制在iPad，iPhone和类似设备上（因为一些旧版浏览器在媒体查询中不支持max-width ，而许多桌面浏览器的运行范围大于1024像素）。

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

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

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

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

实际上，您可能已经知道，您可以将某些CSS定位到手持式，屏幕式，打印机等媒体types。

看看这里的细节..

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

在我的情况下，我想在浏览器的800px或更less的位置将我的标志居中在网站上，然后使用@media标签来完成此操作：

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

它为我工作，希望有人发现这个解决scheme有用。 :)欲了解更多信息，请参阅此。

这意味着如果屏幕尺寸是1024，那么只能在CSS规则下应用。

如果你的媒体查询条件是真实的，那么你的CSS会出现这种情况，这意味着你的媒体查询的条件像素大小的CSS会影响，否则，如果条件将失败，这意味着如果设备的宽度大于1024像素比CSS不会因为你的媒体查询条件是错误的。最大宽度是您的最大css限制，直到这个宽度。

另外值得注意的是，可以使用'em'和'px' – 博客和基于文本的网站，因为浏览器使得布局决定更多地相对于文本内容。

在Wordpress二十十六我想我的标语显示在手机以及桌面，所以我把这个在我的孩子主题style.css

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

它针对一些指定的function执行一些其他的代码…

例如：

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