最大的媒體查詢（最小寬度：1020px）一直覆蓋最小媒體查詢的（最大寬度：599px）彎曲方向的值

我在這4周階媒體的質疑在我的CSS：最大的媒體查詢（最小寬度：1020px）一直覆蓋最小媒體查詢的（最大寬度：599px）彎曲方向的值

@media screen and (max-width: 599px) 
@media screen and (min-width:600px) and (max-width: 895px) 
@media screen and (min-width: 896px) and (max-width: 1019px) 
@media screen and (min-width: 1020px)

他們的工作大多數情況下，除了當我嘗試改變彎曲方向時。我有這個類以上媒體查詢：

.home-mod4-founders { 
display:flex; 
align-items:stretch; 
}

而這個最小的媒體查詢下：

@media screen and (max-width: 599px) { 
.home-mod4-founders { 
    flex-direction:column; 
} 
}

出於某種原因，當屏幕599px下，它需要對一個價值其他3個疑問：

.home-mod4-founders { 
flex-direction:row; 
}

當我檢查了頁面，Chrome的開發工具，它似乎去掉一個最大的媒體查詢部分，使其覆蓋599px媒體查詢： screenshot 活動網站是在這裏：www.whisperlodge.nyc

我複製粘貼的CSS和HTML成codepen http://codepen.io/chillinkwa/pen/MJZVEj

來源

2017-02-13 chillinkwa

當您更改'flex-direction'時，'align-items：stretch'不再適用於橫軸。相反，它適用於'flex-direction：column'的主軸。如果不全面查看代碼，儘管如此，很難說出什麼問題。 –

好吧剛剛簽署了Codepen並堅持我的筆CSS和HTML： http://codepen.io/chillinkwa/pen/MJZVEj 如果有什麼事情在筆看起來關閉，這可能是因爲它是wordpress.com具體。現場也在www.whisperlodge.nyc – chillinkwa

我設法從大媒體查詢刪除類來解決問題。由於在下面的規範中存在相同的規範，它們似乎仍然適用於較大的瀏覽器寬度。

來源

2017-02-13 05:53:05 chillinkwa

http://stackoverflow.com/questions/43999830/using-multiple-css-media-queries-but-its-only-using-the-largest-one/43999854# 43999854 – snkv

最大的媒體查詢（最小寬度：1020px）一直覆蓋最小媒體查詢的（最大寬度：599px）彎曲方向的值

回答

相關問題