前端用媒体查询写一个响应式布局

钱端攻城狮

已于 2022-02-28 17:36:57 修改

阅读量174

点赞数 1

分类专栏： HTML 文章标签：媒体 css3 css

于 2022-02-25 21:16:36 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123141271

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 94%;
				border: 2px solid blue;
				margin: 20px auto;
			}
			
			.left{
				width: 180px;
				border: 1px solid pink;
				padding: 20px 0;
				padding-left: 30px;
				float: left;
				
			}
			/*----*/
			.right{
				margin-left: 212px;
			}
			.right-top, .right-bottom{
				padding: 20px 10px;
				border:1px solid green;
			}
			
			/*-----*/
			@media only screen and (max-width: 600px) {
				.left{
					float: none;
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
				}
				.left li{
					float: left;
					margin-right: 10%;
				}
				.right{
					margin-left: 0px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="left">
				<li>导航1</li>
				<li>导航2</li>
				<li>导航3</li>
				<li>导航4</li>
			</ul>
			
			<!--右侧-->
			<div class="right">
				<div class="right-top">
					这是一个响应式布局练习..这是一个响应式布局练习..这是一个响应式布局练习..这是一个响应式布局练习..这是一个响应式布局练习..</div>
				<div class="right-bottom">
					这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..这是一段打油文字..</div>
			</div>
			
		</div>
		
	</body>
</html>

这是全屏状态
在这里插入图片描述
缩小窗口后

继续缩小窗口