@media screen 和 (max-width: 1024px) 在 CSS 中是什么意思？

小编典典

all

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

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

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

阅读 116

2022-05-25

共1个答案

小编典典

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

此媒体查询中的测试是：

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

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

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

这里是媒体查询规范，它非常易读：

2022-05-25