我的媒体查询不适用于该课程

Question

我有一个媒体查询，如下所示：

@media screen and (max-width: 1200px) {
  .changePicture {
    width: 15%;
    float: left;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 0;
  }
}

.changePicture {
  width: 15%;
  margin-top: 5%;
  margin-right: 20%;
  float: right;
}

这是不在媒体查询中的类。现在我遇到的问题是，当屏幕尺寸小于1200px时查询不适用。

Answer 1

在媒体查询样式之前更改样式以覆盖。

.changePicture {
  width: 15%;
  margin-top: 5%;
  margin-right: 20%;
  float: right;
}
@media screen and (max-width: 1200px) {
  .changePicture {
    width: 15%;
    float: left;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 0;
  }
}

Answer 2

@media only screen and (max-width: 1199px) {
   .changePicture{
     width: 15%;
     float: left;
     margin-top: 5%;
     margin-left: 5%;
     margin-right: 0;
   }
}