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;}
}用div与css实现网页布局代码
/* 设置了浏览器宽度不⼤于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">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>
4、为了兼容IE9以下版本浏览器需要加⼊⼀个google的JS，当然可以下载引⼈html
复制代码
代码如下:
<!--[if lt IE 9]>
<script src="lecode/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="lecode/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> </body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论