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

我在继承的CSS文件中发现了这段代码，但我不能从中找到任何意义:

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

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

475474 次浏览
小开

它限制了在屏幕上定义的样式(例如，不是打印或其他媒体)，并进一步限制了宽度为1024px或更小的视口的范围。

http://www.css3.info/preview/media-queries/

小开

它说:当页面以最大1024像素宽度的分辨率呈现在屏幕上时，然后应用下面的规则。

正如你可能已经知道的，事实上你可以将一些CSS定位到一种媒体类型，可以是手持、屏幕、打印机等。

详细信息请看在这里 ..

小开

这是媒体查询。它允许您将部分CSS规则仅应用于特定配置上的特定设备。

小开
最佳答案

这是一个媒体问题。除非浏览器通过了其中包含的测试，否则它将阻止其中的CSS运行。

此媒体查询中的测试是:

  1. @media screen -浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是桌面级的——而不是例如，旧的手机浏览器(注意，iPhone和其他智能手机浏览器do将自己定位在屏幕类别中)，或者屏幕阅读器——它在屏幕上显示页面，而不是打印它。

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

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

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

下面是媒体查询规范，它是相当可读的:

小开

这意味着如果屏幕大小是1024，那么只适用于CSS规则。

小开

如果你的媒体查询条件为真，那么你的CSS与该条件将工作。这意味着CSS在你的媒体查询的条件像素大小将起作用，否则，如果条件将失败，这意味着如果设备的宽度大于1024px，那么你的CSS将无法工作。因为您的媒体查询条件为假。

max-width是在此宽度之前的最大CSS限制。

小开

在我的例子中，当浏览器有800px或更少时，我想在网站上居中放置我的徽标，然后我通过使用@media标记来做到这一点:

@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}

它为我工作，希望有人发现这个解决方案有用。:)更多信息见这。

小开

同样值得注意的是，你可以使用“em”和“px”——博客和基于文本的网站这样做，因为浏览器会根据文本内容做出布局决定。

在Wordpress 2016上，我想让我的标语在手机和台式机上都能显示，所以我把它放在我的child theme style.css中

@media screen and (max-width:59em){
p.site-description {
display:    block;
}
}
小开

它针对一些特定的功能来执行一些其他的代码……

例如:

@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;


}

上面的代码片段说，如果运行这个程序的设备的屏幕宽度为600px或小于600px，在这种情况下，我们的程序必须执行这一部分。


提交答案