除非我添加“！important”，否则CSS Media Query将无效

Question

我正在使用SCSS尝试为max-width: 320px和max-width: 768px设置一些媒体查询

我在item-content幻灯片中有一个div Owl Carousel的div，其宽度设置为600px，但我希望减小较小设备的宽度。我想将200px用于320px宽的分辨率，300px用于320到768之间的分辨率。

这就是我在_app-responsive.scss中使用的内容，但正如您所看到的，我将!important设置为item-content的宽度，因为否则它会被覆盖，即使我是关于iPhone 5的分辨率是320px宽。

@media (max-width: 320px) {
  .home {
    section#top {
      .owl-theme {
        .owl-dots {
          top: -10%;
        }
        .owl-stage-outer {
          .owl-stage {
            .owl-item {
              .item {
                .item-content {
                  width: 200px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .home {
    section#top {
      .owl-theme {
        .owl-stage-outer {
          .owl-stage {
            .owl-item {
              .item {

                h2 {
                  font-size: 16px;
                }

                .item-content {
                  width: 300px;
                }
              }
            }
          }
        }
      }
    }
  }
}

这是我的整体app.scss

我最后使用媒体查询导入文件，我尝试在_app-custom.scss之前导入它，但这并没有改变任何内容。

@import 'app-variables';
@import '../../vendor/bootstrap-sass/stylesheets/bootstrap';
@import '../../vendor/bootstrap-sass/stylesheets/bootstrap-compass';
@import '../../vendor/font-awesome/scss/font-awesome';
@import 'app-custom';
@import 'app-responsive';