我在继承的一个CSS文件中找到了这段代码，但我无法理解它:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
具体来说，第一行发生了什么？
我在继承的一个CSS文件中找到了这段代码，但我无法理解它:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
具体来说，第一行发生了什么？
这是媒体的质疑.除非浏览器通过其包含的测试，否则它会阻止运行其中的CSS.
此媒体查询中的测试包括:
@media screen-浏览器将自己标识为"屏幕"类别.这大致意味着浏览器认为自己是桌面级的，而不是older移动电话浏览器(请注意，iPhone和其他智能手机浏览器do将自己标识为屏幕类别)，或者是屏幕阅读器-并且它在屏幕上显示页面，而不是打印页面(请注意，iphone和其他智能手机浏览器do将自己标识为屏幕类别)，并且它在屏幕上显示页面，而不是打印页面.
max-width: 1024px-浏览器窗口(包括滚动条)的宽度为1024像素或更小.(CSS pixels, not device pixels)
第二个测试表明，这是为了将CSS限制在iPad、iPhone和类似的设备上(因为一些较老的浏览器在媒体查询中不支持max-width，而且很多桌面浏览器的运行范围超过1024像素).
然而，在支持max-width媒体查询的浏览器中，它也将适用于宽度小于1024像素的桌面浏览器窗口.
这是媒体查询规范，可读性很强: