當媒體查詢覆蓋其他媒體查詢

我爲着陸頁中的特定元素創建了一系列查詢。當媒體查詢覆蓋其他媒體查詢

所以對我的HTML我有這樣的：

<div class="hsContent"> 
    <article> here is my awesome content. boom! </article> 
</div>

，這將是對上述DIV初始風格：

.hsContent { 
    max-width: 600px; 
    position: absolute; 
    left: 25%; 
    right: 25%; 
    top: 10%; 
    z-index: 10; 
}

所以，我寫了一系列的媒體查詢向下鑽取以較小的屏幕尺寸，當時最小的是420px。

@media only screen and (min-width: 320px){ 
    .hsContent { 
     width: 300px; 
     position: absolute; 
     left: 10px; 
     top: 24%; 
     padding: 5px 30px 30px 30px; 
     } 
    }

這個工作正常，當我用開發工具在Chrome中測試。但是，添加其他媒體查詢了320像素寬度，然後用編程軟件檢查後：

@media only screen and (min-width: 320px){ 
    .hsContent{ 
     width:300px; 
     top: 10%; !important; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
}

...該查詢被劃掉了，就好像它被覆蓋（屏幕下方蓋）......在這種情況下它的被先前的420px寬度查詢覆蓋。（請注意，即使是在企圖迫使定位包括重要！）

Here's a screen capture of the media query viewed with dev tools（也顯示爲960像素寬度被覆蓋上一個查詢 - 這當然是有道理的，）

@media only screen and (min-width: 320px) 
    .hsContent { 
    width: 300px; 
    top: 10%; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 
}

那麼，我做了什麼錯，我能做些什麼來解決這個問題呢？

來源

2015-11-09 snottrocket

首先，使用'！important'它的功能就像這樣'top：10％！important;'在中間沒有半colen –

也是，你的兩個媒體查詢都被設置爲相同'w寬度「是什麼媒體查詢是低於另一個將是結果。 –

我覺得這是你要的東西：https://jsfiddle.net/pyexm7us/1/

我重新安排你的媒體查詢，添加420px到查詢的一個固定的語法錯誤：

CSS

.hsContent { 
    max-width: 600px; 
    position: absolute; 
    left: 25%; 
    right: 25%; 
    top: 10%; 
    z-index: 10; 
} 

@media only screen and (min-width: 320px){ 
    .hsContent{ 
     width:300px; 
     background-color: red; 
     top: 10%; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
} 
@media only screen and (min-width: 420px){ 
    .hsContent { 
     background-color: blue; 
     width: 300px; 
     position: absolute; 
     left: 10px; 
     top: 24%; 
     padding: 5px 30px 30px 30px; 
     } 
    }

來源

2015-11-09 22:14:27

當媒體查詢覆蓋其他媒體查詢

回答

相關問題