闲来没事，研究了一下多屏适配和响应式布局的 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 |
页面示例
——单服务器版)
