在這兩個媒體查詢案例中使用CSS「重要」

Question

我正在創建一個移動應用程序，其中出現一些錯誤。

這裏我的核心風格是臺式機：

.abc{ 
    width:1001px; 
} 

@media only screen and (max-width : 320px) { 
.abc{ 
    width:320px!important; 
} 
} 
@media only screen and (max-width : 480px) { 
.abc{ 
    width:480px!important; 
} 
} 

這裏從上面的款式只有480像素的風格正在申請320像素和480像素兩者。

有沒有其他的建議來解決這個問題。

Answer 1

設置最小寬度

.abc { 
    width: 1001px; 
} 

@media only screen and (max-width: 320px) { 
    .abc { 
     width: 320px; 
    } 
} 

/* set a min-width here, so these rules don't apply for screens smaller than 321px */ 
@media only screen and (min-width: 321px) and (max-width: 480px) { 
    .abc{ 
     width: 480px; 
    } 
} 

如果我是正確的，你應該能夠去除!important語法太...

Answer 2

這是因爲max-width:480px;的目標仍然是320px。將最後一個更改爲：

@media only screen and (min-width: 321px) and (max-width: 480px) { 
    .abc { 
     width: 480px !important; 
    } 
} 

並且這將停止該查詢影響321px以下的任何內容。

它看起來並不像你需要!important此修復程序無關與所以我會刪除，如果我是你，可能搞亂了在未來

另一種解決方案是移動在480px之下的320px查詢。它們都具有相同的特性，因此級聯中最後一個優先。