@media屏幕和（最大宽度：1024像素）在CSS中是什么意思？

Question

我在继承的CSS文件中找到了这段代码，但是我觉得毫无意义：

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

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

Answer 1

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

此媒体查询中的测试是：

1. @media screen—浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是台式机类，而不是例如 较旧的 手机浏览器（请注意，iPhone和其他智能手机浏览器 确实 将自己标识为屏幕类别）或屏幕阅读器，并且该浏览器正在显示屏幕上的页面，而不是打印页面。

2. max-width: 1024px—浏览器窗口（包括滚动条）的宽度为1024像素或更小。（CSS像素，而不是设备像素。）

第二项测试表明，此举旨在将CSS限制为iPad，iPhone和类似设备（因为某些旧版浏览器不支持max- width媒体查询，并且许多台式机浏览器的运行宽度超过1024像素）。

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