響應式布局 max-device-width 與 max-width 的區別

本文轉載自查看原文 2017-11-24 21:52 2890 CSS/ 響應式布局/ 多屏適配

閑來沒事，研究了一下多屏適配和響應式布局的 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-width	max-width
根據設備屏幕的寬度進行適配	根據顯示區域的寬度進行適配
PC瀏覽器隨意縮放時不會響應	PC瀏覽器隨意縮放時會響應
-	同時兼容max-device-width

頁面示例

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 響應式布局@media screen and ( max-width: 像素值 ) {} CSS3 響應式布局： @media (min/max-width:***) @font-face CSS3 響應式布局： @media (min/max-width:***) @font-face css 中 max-width 和 min-width 的區別 width:100% 和 max-width:100%; 有區別嗎【轉藏】 max(min)-device-width和max(min)-width的區別理解css中min-width和max-width，width與它們之間的區別聯系 css的width，min-width和max-width css @media min-width max-width 解釋 max-width實現圖片的自適應