@media screen和（最大宽度：1024px）在CSS中是什么意思？

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

@媒体屏幕和（最大宽度：1024px）{
img.bg{
左：50%；
左边距：-512px；}
}

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

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

此媒体查询中的测试包括：

@media screen-浏览器将自己标识为“屏幕”类别。这大致意味着浏览器将自己视为桌面类，而不是较旧的手机浏览器（请注意，iPhone和其他智能手机浏览器将自己识别为屏幕类）或屏幕阅读器，并在屏幕上显示页面，而不是打印页面
最大宽度：1024px-浏览器窗口（包括滚动条）的宽度为1024像素或更小。（CSS像素，而不是设备像素。）

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

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

这是媒体查询规范，可读性很强：