我在继承的CSS文件中发现了这段代码，但我不能从中找到任何意义:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
具体来说，第一行发生了什么?
当前回答
这是一个媒体问题。除非浏览器通过了其中包含的测试，否则它将阻止其中的CSS运行。
此媒体查询中的测试是:
@media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it. max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)
第二个测试表明，这是为了将CSS限制在iPad、iPhone和类似设备上(因为一些较老的浏览器在媒体查询中不支持max-width，而且许多桌面浏览器的运行宽度超过1024像素)。
但是，在支持max-width媒体查询的浏览器中，它也适用于宽度小于1024像素的桌面浏览器窗口。
下面是媒体查询规范，它是相当可读的:
http://www.w3.org/TR/css3-mediaqueries/
其他回答
如果你的媒体查询条件为真，那么你的CSS与该条件将工作。这意味着CSS在你的媒体查询的条件像素大小将起作用，否则，如果条件将失败，这意味着如果设备的宽度大于1024px，那么你的CSS将无法工作。因为您的媒体查询条件为假。
max-width是在此宽度之前的最大CSS限制。
这意味着如果屏幕大小是1024，那么只适用于CSS规则。
同样值得注意的是，你可以使用“em”和“px”——博客和基于文本的网站这样做，因为浏览器会根据文本内容做出布局决定。
在Wordpress 2016上，我想让我的标语在手机和台式机上都能显示，所以我把它放在我的child theme style.css中
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}
在我的例子中，当浏览器有800px或更少的时候，我想把我的logo放在网站的中央，然后我使用@media标签来做到这一点:
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}
它为我工作，希望有人发现这个解决方案有用。更多信息请看这个。
这是一个媒体问题。除非浏览器通过了其中包含的测试，否则它将阻止其中的CSS运行。
此媒体查询中的测试是:
@media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it. max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)
第二个测试表明，这是为了将CSS限制在iPad、iPhone和类似设备上(因为一些较老的浏览器在媒体查询中不支持max-width，而且许多桌面浏览器的运行宽度超过1024像素)。
但是，在支持max-width媒体查询的浏览器中，它也适用于宽度小于1024像素的桌面浏览器窗口。
下面是媒体查询规范，它是相当可读的:
http://www.w3.org/TR/css3-mediaqueries/
