响应式布局 max-device-width 与 max-width 的区别

闲来没事，研究了一下多屏适配和响应式布局的 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

页面示例

posted on 2017-11-24 21:52 观摩阅读(4491) 评论(0) 编辑收藏举报