闲来没事，研究了一下多屏适配和响应式布局的 CSS。
第一种写法
1 @media screen and (max-device- 320px) { 2 3 } 4 5 @media screen and (min-device- 321px) and (max-device- 640px) { 6 7 } 8 9 @media screen and (min-device- 641px) and (max-device- 1000px) { 10 11 }
第二种写法
1 @media screen and (max-device- 640px) { 2 3 @media screen and (max-device-width: 320px) { 4 5 } 6 7 @media screen and (max-device- 360px) { 8 9 } 10 } 11 12 @media screen and (min-device- 641px) and (max-device- 1000px) { 13 14 }
max-device-width 与 max-width 的区别
| max-device-width | max-width |
|---|---|
| 根据设备屏幕的宽度进行适配 | 根据显示区域的宽度进行适配 |
| PC浏览器随意缩放时不会响应 | PC浏览器随意缩放时会响应 |
| - | 同时兼容max-device-width |