CSS媒體查詢不會工作，除非我添加「！重要」

我使用SCSS試圖建立一些媒體查詢的max-width: 320px和max-width: 768pxCSS媒體查詢不會工作，除非我添加「！重要」

我有item-content類股利與寬度設置Owl Carousel幻燈片中到600px但我想減小較小設備的寬度。我想用200px爲320像素寬300px的分辨率是隨時隨地的分辨率和320和768

之間這是我用我的_app-responsive.scss什麼，但你可以看到，我有!important設置爲item-content寬度因爲否則它會被覆蓋，即使我正在分辨320像素寬的iPhone 5。

@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';

來源

2017-05-06 Halnex

我不太確定它，b請儘量不要使用#top並嘗試一下。也許這個ID正在引起優先級。相當「section.top {...」 – funkysoul

我試過它沒有ID，仍然是一樣的。 – Halnex

你有它的在線版本嗎？ – funkysoul

兩個媒體查詢將使width: 200px當窗口是0像素和320像素，但也width: 300px之間時窗口是0像素和768px之間。

爲了解決這個問題，你可以申請width: 200px不使用媒體查詢，只有當窗口的大小大於320px的使用寬度：300像素：

.item-content { 
    width: 200px; 
} 

@media (min-width: 321px) { 
    ... 
    .item-content { 
     width: 300px; 
    } 
}

和：

@media (max-width: 320px) { 
    ... 
    .item-content { 
     width: 200px; 
    } 
} 

@media (min-width: 321px) and (max-width: 768px) { 
    ... 
    .item-content { 
     width: 300px; 
    } 
}

也應該工作，因爲你的問題是，與max-width: 768px查詢總是覆蓋媒體查詢與max-width: 320px

來源

2017-05-07 08:57:32 Manuel

CSS媒體查詢不會工作，除非我添加「！重要」

回答

相關問題