@media screen 和 (max-width: 1024px) 在 CSS 中是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4189868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does @media screen and (max-width: 1024px) mean in CSS?
提问by Yarin
I found this piece of code in a CSS file I inherited, but I can't make any sense out of it:
我在我继承的 CSS 文件中发现了这段代码，但我无法理解它：
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Specifically, what is happening on the first line?
具体来说，第一行发生了什么？
回答by Paul D. Waite
That's a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains.
那是媒体查询。它会阻止其中的 CSS 运行，除非浏览器通过了它包含的测试。
The tests in this media query are:
此媒体查询中的测试是：
@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 oldermobile phone browser (note that the iPhone, and other smartphone browsers, doidentify 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— the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)
@media screen— 浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是桌面级的——而不是例如旧的手机浏览器（注意 iPhone 和其他智能手机浏览器，确实将自己标识为屏幕类别）或屏幕阅读器——并且它正在显示屏幕上的页面，而不是打印出来。max-width: 1024px— 浏览器窗口（包括滚动条）的宽度为 1024 像素或更小。（CSS 像素，而不是设备像素。）
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-widthin media queries, and a lot of desktop browsers are run wider than 1024 pixels).
第二个测试表明这是为了将 CSS 限制在 iPad、iPhone 和类似设备上（因为一些旧浏览器不支持max-width媒体查询，而且许多桌面浏览器的运行宽度超过 1024 像素）。
However, it will also apply to desktop browser windows less than 1024 pixels wide, in browsers that support the max-widthmedia query.
但是，它也适用于支持max-width媒体查询的浏览器中宽度小于 1024 像素的桌面浏览器窗口。
Here's the Media Queries spec, it's pretty readable:
这是媒体查询规范，它非常易读：
回答by Chris Bentley
It's limiting the styles defined there to the screen (e.g. not print or some other media) and is further limiting the scope to viewports which are 1024px or less in width.
它将那里定义的样式限制在屏幕上（例如，不是打印或某些其他媒体），并且进一步将范围限制为宽度为 1024 像素或更小的视口。
回答by Lorenzo
It says: When the page render on the screen at a resolution of max 1024 pixels in width then apply the rule that follow.
它说：当页面以最大 1024 像素宽度的分辨率呈现在屏幕上时，则应用以下规则。
As you may already know in fact you can target some CSS to a media type that can be one of handheld, screen, printer and so on.
正如您实际上可能已经知道的那样，您可以将一些 CSS 定位到一种媒体类型，该媒体类型可以是手持设备、屏幕、打印机等之一。
Have a look herefor details..
详情请看这里..
回答by yehanny
In my case I wanted to center my logo on a website when the browser has 800pxor less, then I did this by using the @mediatag:
在我的情况下，我想在浏览器有800px或更少时将我的徽标放在网站上，然后我使用@media标签来做到这一点：
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}
It worked for me, hope somebody find this solution useful. :) For more information see this.
它对我有用，希望有人觉得这个解决方案有用。:) 有关更多信息，请参阅此。
回答by Crozin
That's Media Queries. It allows you to apply part of CSS rules only to the specific devices on specific configuration.
那是媒体查询。它允许您仅将部分 CSS 规则应用于特定配置的特定设备。
回答by Kumar Nitesh
It means if the screen size is 1024 then only apply below CSS rules.
这意味着如果屏幕尺寸为 1024，则仅适用于以下 CSS 规则。
回答by Anup
If your media query condition is true then your CSS with that condition will work. That means CSS within your media query's condition pixel size will effect, or else if the condition will fail that mean if the device's width is greater than 1024px than your CSS will not work.Because your media query condition false.
如果您的媒体查询条件为真，那么具有该条件的 CSS 将起作用。这意味着您的媒体查询条件像素大小内的 CSS 会起作用，否则如果条件失败，则意味着如果设备的宽度大于 1024 像素，那么您的 CSS 将不起作用。因为您的媒体查询条件为假。
max-widthis your max CSS limit till that width.
max-width是直到该宽度的最大 CSS 限制。
回答by MattB
Also worth noting you can use 'em' as well as 'px' - blogs and text based sites do it because then the browser makes layout decisions more relative to the text content.
同样值得注意的是，您可以使用 'em' 和 'px' - 博客和基于文本的网站会这样做，因为这样浏览器会做出更多与文本内容相关的布局决定。
On Wordpress twentysixteen I wanted my tagline to display on mobiles as well as desktops, so I put this in my child theme style.css
在 Wordpress 261 上，我希望我的标语能在手机和台式机上显示，所以我把它放在我的子主题 style.css 中
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}
回答by shahin gh
It targets some specified feature to execute some other codes...
它针对某些指定的功能来执行其他一些代码......
For example:
例如：
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}
the above snippet say if the device that run this program have screen with 600px or less than 600px width, in this case our program must execute this part .
上面的代码片段说如果运行这个程序的设备有 600px 或小于 600px 宽度的屏幕，在这种情况下我们的程序必须执行这部分。
