CSS如何判断不同分辨率显示不同宽度
这篇文章主要介绍“CSS如何判断不同分辨率显示不同宽度”，在日常操作中，相信很多人在CSS如何判断不同分辨率显示不同宽度问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS如何判断不同分辨率显示不同宽度”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、适用畛域描述
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代码
.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* css表述：设置装备摆设了涉猎器宽度不小于1201px时 abc 体现1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了阅读器宽度不大于1200px时 abc 透露表现900px宽度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 配置了涉猎器宽度不大于901px时 abc 显现200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} }/* 配置了浏览器宽度不大于500px时 abc 展现100px宽度 */
需要寄望是CSS代码步伐，由大到小排版CSS（判断阅读器宽度越大越放前），多么是因为逻辑干系，@media 判断CSS排错将导致判断起效。
3、HTML代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>无问题文档</title><style>.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 设置装备摆设了阅读器宽度不小于1201px时 abc 展现1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了涉猎器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .abc {width: 200px;} } /* 设置装备摆设了阅读器宽度不大于900px时 abc 体现200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置装备摆设了阅读器宽度不大于500px时 abc 表示100px宽度 */ </style></head><body><div class="abc">CSS5实例：我这个DIV宽度会随浏览器宽度变更哦，尝尝篡改阅读器宽度</div></body></html>4、为了兼容IE9下列版本涉猎器紧要参预一个google的JS，诚然或者下载引人html
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.谷歌code.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
将JS代码放入</head>标签前就可，这里直接引人google在线JS，你可以下载此JS文件重新HTML惹人就可。
5、美满兼容各大阅读器HTML+CSS+JS源代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>无问题文档</title><style>.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* css 疏解说明：设置装备摆设了阅读器宽度不小于1201px时 abc 显现1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置装备摆设了涉猎器宽度不大于1200px时 abc 表示900px宽度 */ @media screen and (max-width: 900px) { .abc {width: 200px;} } /* 配置了涉猎器宽度不大于900px时 abc 表现200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了涉猎器宽度不大于500px时 abc 透露表现100px宽度 */ </style><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.谷歌code.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--></head><body><div class="abc">CSS5实例：我这个DIV宽度会随涉猎器宽度转变哦，尝尝旋转阅读器宽度</div></body></html>到此，关于“CSS如何判断不同分辨率显示不同宽度”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论