@media或表達式和最大寬度

Question

讓我先說我是CSS noob。我可以自由地接受任何指責

@media (max-width: 735px) {... } 
@media (min-width: 735px) {... } 

@media (width: 320px) {... } 

@media (width: 360px) {... } 
@media (width: 375px) {... } 
@media (width: 414px) {... } 

我有這些東西能使其敏感。 我想使用max-width，但未能確定爲什麼，但瀏覽器總是選擇另一個max-width表達式並執行它，所以我只是收集了手機的寬度並做出了這個。

而且我想發送相同的內容給誰有360px和320px是否有任何「或」的表達可能是我可以縮小它。

Answer 1

如果我從你的問題中得到了正確答案，你可以添加以下media query。

@media (min-width: 320px) and (max-width: 360px) { 
    html { color: blue; } 
} 

我建議使用一種不同的方法，無論是移動第一或桌面第一使用媒體查詢。通過這種方式，您可以簡單地向許多人解決正確的佈局，而無需編寫例外。

移動第一

html { color: purple; } 

@media (min-width: 600px) { 
    html { color: black; } 
} 

/* And go up the road */ 

臺式第一

html { color: purple; } 

@media (max-width: 600px) { 
    html { color: black; } 
} 

/* And go down the road */