@media screen我的尺寸最佳實踐

Question

我是@media屏幕的新手，請耐心等待。

我沒有流體設置，而是針對3種不同設備設置的固定設置。

Mobile = max-width 500px. 
Tablet = max-width 740px. 
Laptop/desktop/desktop hd = width 980px. 

-

所以我是正確的說法如下：

@media (max-width: 500px) { } 
@media (max-width: 740px) { } 
@media (min-width: 741px) { } 

Answer 1

你需要最後有最小的屏幕寬度，這樣的：

@media (min-width: 741px) { } 
@media (max-width: 740px) { } 
@media (max-width: 500px) { } 

由於CSS從頂部讀到底部，那麼與你的max-width: 740px會重疊，因爲320px仍然不到74 0像素。

您還可以設置一個最小寬度：

@media (max-width: 500px) { } 
@media (min-width:501px) and (max-width: 740px) { }  
@media (min-width: 741px) { } 

然後你可以把它們作爲你想要的。

編輯：

這實際上是更好：

[ CSS For 741px and above here ] 

@media (max-width: 740px) { } 
@media (max-width: 500px) { } 

這樣，你只需要修復的寬度，字體大小和這樣的媒體查詢，你不需要編寫背景顏色和字體顏色，如果他們應該保持不變。