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

2018-06-24 02:02:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

 页面示例

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML 字符实体

下一篇:sass基础常用指南