閑來沒事，研究了一下多屏適配和響應式布局的 CSS。

第一種寫法

1 @media screen and (max-device-width: 320px) { 2 3 } 4 5 @media screen and (min-device-width: 321px) and (max-device-width: 640px) { 6 7 } 8 9 @media screen and (min-device-width: 641px) and (max-device-width: 1000px) { 10 11 }

?

第二種寫法

1 @media screen and (max-device-width: 640px) { 2 3 @media screen and (max-device-width: 320px) { 4 5 } 6 7 @media screen and (max-device-width: 360px) { 8 9 } 10 } 11 12 @media screen and (min-device-width: 641px) and (max-device-width: 1000px) { 13 14 }

?

max-device-width 與 max-width 的區別

max-device-widthmax-width

根據設備屏幕的寬度進行適配	根據顯示區域的寬度進行適配
PC瀏覽器隨意縮放時不會響應	PC瀏覽器隨意縮放時會響應
-	同時兼容max-device-width

?

?頁面示例

?

總結

以上是生活随笔為你收集整理的响应式布局 max-device-width 与 max-width 的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。