浏览器忽略媒体查询

Question

我正在尝试插入一个简单的媒体查询，以便在手机上查看时，提交表单的页面宽度为90％（在其他时间设置为50％）。当我缩小视口时，它不会拾取媒体查询。这是我的代码：

SCSS：

@media(max-width:767px){
  .submit{
    width: 90%;
  }
}

.submit{
      width: 50%;
      margin: auto;
      margin-top: 300px;
      margin-bottom: 300px;

      .submitBackground{
        background-color: $orange;
        opacity: .6;
        padding: 20px;
      }
      .submitEvent{
        background-color: white;
        opacity: .6;
        button{
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
    }
    form{
      width: 80%;
      margin: auto;
      text-align: center;
      padding: 20px;
      .form-control{
        margin: 10px;
      }
      .radio-inline{
        margin: 10px;
        position: relative;
      }
    }

Answer 1

您的媒体查询需要 非媒体查询声明之后。否则它将无法覆盖该属性。

.submit {
  ...
}

@media (max-width:767px) {
  .submit{
    width: 90%;
  }
}