手机端实现动态响应页面宽度，变换不同的样式

最新推荐文章于 2022-01-27 21:46:21 发布

白帽子舒克

最新推荐文章于 2022-01-27 21:46:21 发布

阅读量352

点赞数 1

文章标签： html css3 浏览器宽度

本文链接：https://blog.csdn.net/qq_16882597/article/details/80050657

版权

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		<style>
			#box{width:500px;height:100px;background:yellow;}
			
			@media screen and  (min-width: 960px) and (max-width: 1199px) {			 
				#box {
					width:960px;
					height:500px;
					background:red;
				}
			}
			
			@media screen and  (min-width: 500px) and (max-width: 960px) {
				#box {
					width:660px;
					background:green;
					height:500px;
				}
			}
			
			@media screen and  (min-width: 300px) and (max-width: 500px) {
				#box {
					width:660px;
					background:coffee;
					height:500px;
				}
			}
		</style>
		<div id="box"> </div>
	</body>
</html>