@media屏幕和(max-width:1024px)在CSS中意味着什么？

Question

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

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

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

Answer 1

这是一个媒体查询.除非浏览器传递它包含的测试,否则它会阻止其中的CSS运行.

此媒体查询中的测试包括:

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

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

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

这是媒体查询规范,它非常易读:

您可以使用(min-width:1200px)而不是使用max-width,或者您可以将其作为常规CSS而不使用媒体查询,并使用'max-width'在它转到较小的设备时覆盖它 (2认同)

Answer 2

它将在那里定义的样式限制在屏幕上(例如,不是打印或其他介质),并且进一步将范围限制为宽度为1024px或更小的视口.

Answer 3

它说:当页面在屏幕上以最大1024像素宽度的分辨率渲染时,请应用后面的规则.

实际上您可能已经知道,您可以将某些CSS定位到可以是手持设备,屏幕,打印机等媒体类型.

看看这里的细节..

Answer 4

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

我在这里修改你的链接是一个哈希链接 - > http://www.w3.org/TR/css3-mediaqueries/#media0而不是这里 - > http://www.w3.org/TR/css3-mediaqueries / (2认同)

Answer 5

在我的情况下,我想在浏览器有800px或更少的时候将我的徽标放在网站上,然后我通过使用@media标签来做到这一点:

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

它对我有用,希望有人觉得这个解决方案很有用.:)有关更多信息,请参阅此处.