我应该如何正确使用媒体查询？

Question

我将我的页面内容包裹在一个 mycontainer div 中。大屏居中对齐，小屏居左

我定义了容器的边距和宽度，它在桌面上运行完美。然而，媒体查询不在智能手机上使用。我的错误在哪里？

.mycontainer {
  margin: 0 auto;
  width:50%;

  @media only screen and (max-width: 767) {
    margin:0 auto;
    width:100%;
  }
}

编辑：删除媒体查询中的 margin: 0 auto 不会改变任何内容

Answer 1

你一定要提合适的尺码。

.mycontainer{
      margin: 0 auto;
      width:50%;

      @media only screen and (max-width: 767px) {
        margin:0 auto;
        width:100%;
      }
}

Answer 2

@media ... 应该在根级别。您会看到 @media 查询在选择器中使用，就像上面的那样，但这只能在 CSS 预处理器中使用，例如 Sass。普通CSS的正确方法如下：

.mycontainer{
      margin: 0 auto;
      width:50%;
}

@media only screen and (max-width: 767px) {
   .mycontainer{
        margin:0 auto;
        width:100%;
    }
}

我应该如何正确使用媒体查询？

How should i use media querys correctly?

css

media-queries