编写自适应网页——media_前端根据网页大小自适应media-优快云博客

本文介绍了一种基于屏幕尺寸变化的响应式网页布局方案，通过使用媒体查询来调整不同设备上的页面元素展示方式，实现从PC到手机端的良好适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/screen1.css">
	<style>
		div{
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<h1>根据屏幕尺寸不同，显示不同布局样式</h1>
	<div class="container">
		<div class="left">
			左侧附加导航
			<ul>
				<li>新闻列表</li>
				<li>图片列表</li>
				<li>明星列表</li>
			</ul>
		</div>
		<div class="middle">
			<div class="container-fluid">
				<img src="img/mao.jpg" class="my-img" alt="">
				<img src="img/mao.jpg" class="my-img" alt="">
				<img src="img/mao.jpg" class="my-img" alt="">
				<img src="img/mao.jpg" class="my-img" alt="">
			</div>
			中部主题内容
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem enim, alias dolorem, ratione earum, a animi eveniet quam, reiciendis saepe harum ipsam qui. Libero molestias, est ipsum aspernatur nam? Suscipit.</div>
		</div>
		<div class="right">
			右侧可有可无广告
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
		</div>
	</div>
</body>
</html>

screen1.css

/* 公共代码 */
*{
	box-sizing: border-box;
	/* 宽度和高度属性包含内容，内边距和边框，但不包含外边距。 */
}
body{
	margin: 0;
	background: #FFF;
	font-size: 1em;
}
/* 定宽容器 */
.container{
	margin: 0 auto;
}
.container:before{
	content: ' ';
	display: table;
	/* table类型能生成独立的bfc，防止上边距塌陷 */
} 
/* 定宽子容器 */
.container-fluid{
	width: 100%;
}
.left,.middle,.right{
	float: left;
}
.my-img{
	float: left;
	padding: 10px 5px;
}
/* 针对PC屏幕媒体查询 */
@media screen and (min-width: 992px){
	.container{
		width: 970px;
		color: red;
	}
	.left,.right{
		width: 20%;
	}
	.middle{
		width: 60%;
	}
	.my-img{
		width: 25%;
	}
}
/* 针对PAD屏幕媒体查询 */
@media screen and (min-width:768px) and (max-width: 991px){
	.container{
		width: 750px;
		color: green;
	}
	.left{
		width: 25%;
	}
	.middle{
		width: 75%;
	}
	.right{
		display: none;
	}
	.my-img{
		width: 25%;
	}
}
/* 针对PHONE屏幕媒体查询 */
@media screen and (max-width: 767px){
	.container{
		width: 100%;
		color: blue;
	}
	.left,.middle{
		width: 100%;
	}
	.right{
		display: none;
	}
	.my-img{
		width: 50%;
	}
}