闲来没事，研究了一下多屏适配和响应式布局的 CSS。第一种写法 1 @media screen and (max-device-width: 320px) { 2 3 } 4 5 @media screen and (min-device-width: 321px) and ...
闲来没事，研究了一下多屏适配和响应式布局的 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 |
页面示例
原标题：响应式布局 max
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
