css判断不同分辨率显示不同宽度布局实现自适应宽度

释放双眼,带上耳机,听听看~!

CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求。使用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">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div>
	</body>

</html>
4、兼容各大浏览器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
			}
		}
		
		@media screen and (max-width: 1200px) {
			.abc {
				width: 900px
			}
		}
		
		@media screen and (max-width: 900px) {
			.abc {
				width: 200px;
			}
		}
		
		@media screen and (max-width: 500px) {
			.abc {
				width: 100px;
			}
		}
	</style>
	<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>
	<div class="abc">DIV宽度会随浏览器宽度变化哦,改变浏览器宽度</div>
</body>

</html>
内容投诉

人已赞赏
前端开发

[前端实战] 专家级WEB工程师的试炼 700+集Web开发课程 初级中级高级资深级专家级一站式WEB课程

2018-12-23 19:03:30

前端开发

[前端实战] Vue2.5 实战微信读书 媲美原生App的企业级web书城

2019-1-9 21:40:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索