我在继承的CSS文件中找到了这段代码，但是我觉得毫无意义：
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
具体来说，第一行发生了什么？
@media屏幕和（最大宽度：1024像素）在CSS中是什么意思？
如果您的媒体查询条件为true，则具有该条件的CSS将起作用。这意味着媒体查询条件像素大小内的CSS将生效，否则，如果条件失败，则意味着设备宽度大于1024px而不是CSS无效。因为媒体查询条件为false。
max-width 是您在该宽度之前的最大CSS限制。
它说：当页面以最大1024像素的宽度分辨率在屏幕上呈现时，请遵循以下规则。
您可能实际上已经知道，您可以将某些CSS定位到一种媒体类型，该媒体类型可以是手持设备，屏幕，打印机等之一。
看看这里的细节..
它限制了屏幕上定义的样式（例如，不打印或其他介质），并且进一步将范围限制为宽度小于或等于1024像素的视口。
就我而言，我想在浏览器数量800px不多的情况下将徽标放置在网站上，然后使用@media标记来做到这一点：
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}
它对我有用，希望有人觉得这个解决方案有用。:)有关更多信息，请参见this。
这意味着，如果屏幕大小为1024，则仅适用于CSS规则。
那就是媒体查询。它允许您将部分CSS规则仅应用于特定配置上的特定设备。
那是媒体查询。除非浏览器通过其中包含的测试，否则它将阻止运行其中的CSS。
此媒体查询中的测试是：
@media screen—浏览器将自己标识为“屏幕”类别。这大致意味着浏览器将自己视为台式机类，而不是例如较旧的手机浏览器（请注意，iPhone和其他智能手机浏览器确实将自己标识为屏幕类别）或屏幕阅读器，并且该浏览器正在显示屏幕上的页面，而不是打印页面。max-width: 1024px—浏览器窗口（包括滚动条）的宽度为1024像素或更小。（CSS像素，而不是设备像素。）
That second test suggests this is intended to limit the CSS to the iPad, iPhone, and similar devices (because some older browsers don’t support max-width in media queries, and a lot of desktop browsers are run wider than 1024 pixels).
However, it will also apply to desktop browser windows less than 1024 pixels wide, in browsers that support the max-width media query.
Here’s the Media Queries spec, it’s pretty readable:
它针对某些指定功能来执行其他一些代码...
例如：
the above snippet say if the device that run this program have screen with 600px or less than 600px width, in this case our program must execute this part .