CSS判断不同分辨率显示不同宽度布局

CSS果决不同鉴别率涉猎器（显露屏幕）显露差别宽度组织CSS3技术手段赞成IE6到IE8。将用到css3 @media技俩进行武断，但IE9以下版本不赞成CSS3武艺，这里CSS5给大家介绍通过JS完成低版本的阅读器也支持CSS3完成合用机关。

一、适用畛域描述

CSS DIV网页机关中当分辨率小于即是1024px（像素）时，DIV结构对象展示1000px宽度，当辨别率大于1024px时辰显现1200px宽度等需求。使用CSS完成篡改阅读器显露宽度从而实现构造的网页宽度消息改变变更（网页宽度被动随涉猎器透露表现宽度而变宽变窄）。

随着发展，愈来愈多的电脑用户闪现屏区分率越来越高，但有的用户仍是使用1024px的判别率的浮现屏（依照几个浏览器分辨率统计平台失掉数据那会使用1200判袂率下列用户少少，但咱们CSS结构时依旧必要至多思忖1024px区分率用户），假如网页结构宽度静止到1200px，1024判别率用户浏览网页时阅读器下方会呈现迁移转变条，为了方案这个问题，人人可以或许经由运用CSS3样式判断用户涉猎器宽度从而挪用一致机关宽度。

二、应用CSS单词与语法

@media screen and (武断属性){ CSS名堂决议器 }

这里留意花括号里装要变换CSS款式选择器。

三、不合鉴识率显示差别宽度花式案例

1、DIVCSS小案例形容
我们起首设置一个DIV盒子CSS命名为".abc"，配置其高度为300px，css边框为玄色；以及设置装备摆设margin:0 auto机关居中。起先配置这两个花色是为了便于视察。

我们经由过程手动拖拽浏览器显露宽度，此后观测此盒子宽度变换状况，当浏览器宽度调治到宽度不大于500px时，对应此盒子宽度显露100px；调节阅读器宽度不大于901px时，表示".abc"对应盒子宽度展示200px; 当调理涉猎器宽度大于1201px时，盒子对象宽度显示1200px；当小于1200px时辰闪现宽度为900px。

2、CSS代码

1. .abc{ height:300px; border:1pxsolid#000; margin:0auto}
2. @mediascreenand(min-width:1201px){
3. .abc{ width:1200px}
4. }
5. /*css表述：设置装备摆设了涉猎器宽度不小于1201px时abc体现1200px宽度*/
7. @mediascreenand(max-width:1200px){
8. .abc{ width:900px}
9. }
10. /*设置了阅读器宽度不大于1200px时abc透露表现900px宽度*/
12. @mediascreenand(max-width:901px){
13. .abc{ width:200px; }
14. }
15. /*配置了涉猎器宽度不大于901px时abc显现200px宽度*/
17. @mediascreenand(max-width:500px){
18. .abc{ width:100px; }
19. }
20. /*配置了浏览器宽度不大于500px时abc展现100px宽度*/

需要寄望是CSS代码步伐，由大到小排版CSS（判断阅读器宽度越大越放前），多么是因为逻辑干系，@media 判断CSS排错将导致判断起效。

3、HTML代码

5. 无问题文档
7. .abc{ height:300px; border:1pxsolid#000; margin:0auto}
8. @mediascreenand(min-width:1201px){
9. .abc{ width:1200px}
10. }
11. /*设置装备摆设了阅读器宽度不小于1201px时abc展现1200px宽度*/
13. @mediascreenand(max-width:1200px){
14. .abc{ width:900px}
15. }
16. /*设置了涉猎器宽度不大于1200px时abc显示900px宽度*/
18. @mediascreenand(max-width:900px){
19. .abc{ width:200px; }
20. }
21. /*设置装备摆设了阅读器宽度不大于900px时abc体现200px宽度*/
23. @mediascreenand(max-width:500px){
24. .abc{ width:100px; }
25. }
26. /*设置装备摆设了阅读器宽度不大于500px时abc表示100px宽度*/
31. CSS5实例：我这个DIV宽度会随浏览器宽度变更哦，尝尝篡改阅读器宽度

4、为了兼容IE9下列版本涉猎器紧要参预一个google的JS，诚然或者下载引人html

将JS代码放入标签前就可，这里直接引人google在线JS，你可以下载此JS文件重新HTML惹人就可。

5、美满兼容各大阅读器HTML+CSS+JS源代码

5. 无问题文档
7. .abc{ height:300px; border:1pxsolid#000; margin:0auto}
8. @mediascreenand(min-width:1201px){
9. .abc{ width:1200px}
10. }
11. /*css 疏解说明：设置装备摆设了阅读器宽度不小于1201px时abc显现1200px宽度*/
13. @mediascreenand(max-width:1200px){
14. .abc{ width:900px}
15. }
16. /*设置装备摆设了涉猎器宽度不大于1200px时abc表示900px宽度*/
18. @mediascreenand(max-width:900px){
19. .abc{ width:200px; }
20. }
21. /*配置了涉猎器宽度不大于900px时abc表现200px宽度*/
23. @mediascreenand(max-width:500px){
24. .abc{ width:100px; }
25. }
26. /*设置了涉猎器宽度不大于500px时abc透露表现100px宽度*/
32. CSS5实例：我这个DIV宽度会随涉猎器宽度转变哦，尝尝旋转阅读器宽度

6、效果截图 因为设置装备摆设宽度原由，不便截图，各人可直接搜查在线案例，通过拖拽扭转涉猎器宽度察看成果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！