@media screen和（max-width：1024px）是什么意思在CSS？ [英] What does @media screen and (max-width: 1024px) mean in CSS?
问题描述
我在一个CSS文件中找到这段代码，我继承了，但我不能理解它：
I found this piece of code in a CSS file I inherited, but I can't make any sense out of it:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
具体来说，第一行发生了什么？
Specifically, what is happening on the first line?
推荐答案
这是一个媒体查询。
此媒体查询中的测试包括：
The tests in this media query are:
-
@media screen- 浏览器将自身标识为处于屏幕类别。这大致意味着浏览器认为自己是桌面级的 - 而不是例如。一个旧的手机浏览器（注意，iPhone和其他智能手机浏览器，自己标识为在屏幕类别）或屏幕阅读器 - 并且它显示
@media screen— The browser identifies itself as being in the "screen" category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it.
max-width：1024px 浏览器窗口（包括滚动条）为1024像素或更少。 （ CSS像素，而不是设备像素）。
max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)
第二个测试表明这是为了限制CSS到iPad，iPhone和类似的设备（因为一些旧的浏览器不支持 max-width 在媒体查询中，并且许多桌面浏览器的运行宽度大于1024像素）。
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).
适用于支持 max-width 媒体查询的浏览器中小于1024像素宽的桌面浏览器窗口。
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:
- http://www.w3.org/TR/css3-mediaqueries/
这篇关于@media screen和（max-width：1024px）是什么意思在CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
