媒体查询未加载

Question

在过去的几个小时里，这一直让我很痛苦..

似乎没有媒体查询对我的代码进行任何更改。 chrome 开发工具中没有显示任何内容，但它在我的样式表中。

我只是想在 body 上设置一个 max-width，left 和 right 边距在尺寸超过 [=16= 时自动设置].

这是我的 post css 代码：

body {
  bottom: 0;

  @media and screen (width >= 768px) {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

}

输出这个 css:

body {
  bottom: 0;

}

@media and screen (min-width: 768px) {

  body {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

我在 head 标签中加入了 <meta name="viewport" content="width=device-width, initial-scale=1">。有什么我想念的吗？

当它不在媒体查询中时它工作正常。

http://jsfiddle.net/2msm1p1L/

Answer 1

您弄错了订单 - and 在 screen

之后

body {
  bottom: 0;
}
@media screen and (min-width: 768px) {
  body {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.placeholder {
  background: red;
  height: 200px;
  width: 100%;
}

<div class="placeholder"></div>

媒体查询未加载

media queries not loading

html

css

media-queries