CSS不承認最小寬度媒體查詢

Question

我不知道爲什麼我的CSS media查詢工作不正常：

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
.bottom-right{margin-top:20%;} 
.bottom-right h2{font-size: 0.9em;} 
.buttons{font-size: 1.0em;} 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 993px) { 
.solodesktop{display:block;} 
.solomobile{display:none;} 
.bottom-right{margin-top:10%;} 
.bottom-right h2{font-size: 7em;} 
.buttons{font-size: 0.8em;} 
} 

在頁面，.bottom-right類的margin-top屬性不一個應用上限爲20％。

Answer 1

您當前的媒體查詢的順序導致了問題。

當分叉min-width值時，您應該始終將它們按照升序排列在像素值中。交換min-width: 993px和min-width: 1200px的地方，它應該運行平穩。

其他選項還將max-width值設置爲媒體查詢（請參閱羅馬的答案），因此它知道不會干擾下一個查詢。 CSS總是從頂部到底部讀取，因此如果您不夠詳細，最後一條規則將覆蓋前一條。

Answer 2

你的媒體查詢都不夠精確，第二個查詢開始於993px，沒有最高。限制，這意味着它會覆蓋第一個媒體查詢。發生這種情況是因爲，自上而下應用css規則會覆蓋第一個媒體查詢。

爲了解決這個問題，你可以說：

/* Medium Devices, Desktops */ 
@media only screen and (min-width: 993px) and (max-width: 1199px) { 
.solodesktop{display:block;} 
.solomobile{display:none;} 
.bottom-right{margin-top:10%;} 
.bottom-right h2{font-size: 7em;} 
.buttons{font-size: 0.8em;} 
} 

這裏是CSS臺，現在CSS Desk Code

工作在993px它有默認的HTML樣式，993px和1199px之間確實利潤率10％等。並在1200px（最小寬度：1200px）它更改保證金等