引言

在最近的项目开发过程中，需要对项目进行响应式设计，在设计响应式的过程中，一般有以下几种写法：

①使用vw，vh，em，rem，%等响应式单位

②使用媒体查询@media

此篇不过多介绍这些用法，主要用于记录媒体查询@media失效的问题。

案例

我发现自己写上了@media之后，但是却并没有生效，阅诸多案例后却依旧无头绪，发现网上的案例大多数都是简单的案例，例如：

<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>

可是在实际开发过程中，样式都是非常复杂的，会涉及到less与scss等，例如下列less样式：

.formBox{
    .formInputBox {
        width: 40vw;
        height: 6vh;
        .formInputItem {
          width: 6vw;
          height: 4vh;
        }
        .formInput input {
          width: 32vw;
          height: 5vh;
        }
      }
}

正确写法

如果需要对其中的formInputBox，formInputItem，formInput input进行媒体查询，则媒体查询的位置应该写在：

.formBox{
    .formInputBox {
        width: 40vw;
        height: 6vh;
        .formInputItem {
          width: 6vw;
          height: 4vh;
        }

        .formInput input {
          width: 32vw;
          height: 5vh;
          margin-left: 5px;

        }
      }
      // 媒体查询，当页面宽度小于800px时候，则触发下列的样式
      @media (max-width: 800px) {
        .formInputBox {
          width: 95vw;
          .formInputItem {
            width: 15vw;
          }
          .formInput input {
            width: 70vw;
          }
        }
      }
}

首先媒体查询内部的第一层元素应该与其对应的元素同级，将其写出该层级或者写入媒体查询都无法生效，包括后续的其他元素也得与外部的元素层级一一对应，否则可能会生效。