响应式布局 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实现图片的自适应