响应式布局 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-widthmax-width

根据设备屏幕的宽度进行适配	根据显示区域的宽度进行适配
PC浏览器随意缩放时不会响应	PC浏览器随意缩放时会响应
-	同时兼容max-device-width

 

 页面示例

 

总结

以上是生活随笔为你收集整理的响应式布局 max-device-width 与 max-width 的区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。