如何正确使用CSS媒体查询？自定义容器移动端样式不生效排查

错误1：媒体查询参数缺失单位 #

你写的max-width: 767没有加长度单位，CSS无法识别该阈值，导致媒体查询全程不生效，必须补充px单位，改为max-width: 767px。

错误2：原生CSS不支持选择器内嵌套媒体查询 #

你当前的写法是CSS预处理器（Sass/Less等）的嵌套语法，如果直接在原生CSS文件中写这段代码，浏览器会识别失败，必须把媒体查询拆到外层，独立包裹选择器。

错误3：小屏对齐逻辑不符合需求 #

你要求小屏左对齐，但媒体查询内仍然写了margin: 0 auto，这会让容器保持水平居中，要左对齐的话需要把小屏的margin改为margin: 0。

原生CSS版本 #

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

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

预处理器版本（Sass/Less适用，补充单位即可） #

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

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

内容的提问来源于stack exchange，提问作者nt369