掌握响应式设计精髓：一段代码搞定多屏幕适配

人亦已歌

掌握响应式设计精髓：一段代码搞定多屏幕适配

在写CSS前，需要在页面上;内加上如下代码，

2. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />;

复制代码

禁止页面缩放，如果自动缩放了就不能触发CSS自适应代码了。

然后是自用的CSS自适应代码，大家根据注释自行修改。

2. <strong>1280分辨率以上（大于1200px）</strong>
3. @media screen and (min-width:1200px){
4. #page{ width: 1100px; }
5. }
6. <strong>1100分辨率（大于960px，小于1199px）</strong>
7. @media screen and (min-width: 960px) and (max-width: 1199px) {
8. #page{ width: 960px; }
9. }
10. <strong>880分辨率（大于768px，小于959px）</strong>
11. @media screen and (min-width: 768px) and (max-width: 959px) {
12. #page{ width: 900px; }
13. }
14. <strong>720分辨率（大于480px，小于767px）</strong>
15. @media only screen and (min-width: 480px) and (max-width: 767px){
16. #page{ width: 450px; }
17. }
18. <strong>440分辨率以下（小于479px）</strong>
19. @media only screen and (max-width: 479px) {
20. #page{ width: 300px; }
21. }

复制代码