代码之家 › 专栏 › 技术社区 › Yarin

在CSS中,@media screen和(最大宽度:1024px)是什么意思?

media-queries css3 css

242

Yarin · 技术社区 · 14 年前

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

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

具体来说,在第一条线上发生了什么?

9 回复 | 直到 13 年前

305

Paul D. Waite 11 年前

这是一个媒体查询。除非浏览器通过它所包含的测试,否则它将阻止运行其中的CSS。

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

@media screen 浏览器将自己标识为屏幕类别。这大致意味着浏览器认为自己是桌面类,而不是老的手机浏览器(请注意,iPhone和其他智能手机浏览器, 做确定自己属于屏幕类别)或屏幕阅读器,并且屏幕阅读器在屏幕上显示页面,而不是打印页面。
max-width: 1024px 浏览器窗口(包括滚动条)的宽度不超过1024像素。( CSS pixels, not device pixels .)

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

但是,它也适用于支持 最大宽度 媒体查询。

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

Chris Bentley 6 年前

它将定义的样式限制在屏幕上(例如,不打印或其他一些媒体),并进一步将范围限制在宽度小于或等于1024倍的视口上。

Lorenzo OnoSendai 14 年前

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

正如您可能已经知道的,实际上您可以将一些CSS指向一种媒体类型,可以是手持、屏幕、打印机等。

看一看 here 详细情况。。

jcolebrand 14 年前

那是 Media Queries . 它允许您仅将部分CSS规则应用于特定配置上的特定设备。

atiquratik jaywon 9 年前

在我的例子中,当浏览器有 800px 或者更少,然后我用 @media 标签:

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

它对我有用,希望有人能找到有用的解决方案。:)有关详细信息,请参见 this .

Kumar Nitesh 12 年前

这意味着,如果屏幕大小为1024,则仅适用于低于CSS规则的情况。

Anup 6 年前

如果您的媒体查询条件为true,则具有该条件的CSS将工作。这意味着你的媒体查询条件像素大小内的CSS将生效,否则如果条件失败,意味着如果设备的宽度大于1024px,你的CSS将不起作用。因为你的媒体查询条件为false。

max-width 是你的最大CSS限制到那个宽度。

MattB 8 年前

同样值得注意的是,你可以使用'em'和'px'-博客和基于文本的网站这样做,因为这样浏览器就可以做出与文本内容更相关的布局决策。

在WordPress2116上,我希望我的标语在手机和桌面上都能显示出来,所以我把它放在了child theme style.css中

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

Shahin Ghasemi 6 年前

它的目标是某个特定的功能来执行其他一些代码。。。

例如:

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

  }

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