media响应式布局媒体查询--课堂小案例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62052306/article/details/130214777

本文介绍了如何利用CSS媒体查询实现响应式设计，当屏幕宽度在500px至960px之间时，二级菜单会显示；小于500px时，菜单变为图标形式。示例代码包括HTML结构和CSS样式，展示了不同宽度下页面布局的变化。

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

碎碎念

hello，我是小九，今天咱们记录media媒体查询。

效果展示

宽度在500px—960px之间展示的效果（二级菜单出现）

在这里插入图片描述

宽度小于500px展示的效果(隐藏菜单，显示图标)

在这里插入图片描述

代码展示

HTML代码展示

	<body>
		<div class="nav">
			<div class="nav_logo"><img src="img/logo.png" alt=""></div>
			<ul class="nav_words">
				<li>马嘉祺</li><li>丁程鑫</li>
				<li>宋亚轩</li><li>刘耀文</li>
				<li>张真源</li><li>严浩翔</li><li>贺峻霖</li>
			</ul>
			<div class="img_line"><img src="img/line.png" alt=""></div>
		</div>
		
		<ul class="box">
		<li><a href=""><img src="img/1.jpg" alt="" width="140" height="160"></a></li>
		<li><a href=""><img src="img/2.jpg" alt="" width="140" height="160"></a></li>
		<li><a href=""><img src="img/3.jpg" alt="" width="140" height="160"></a></li>
		<li><a href=""><img src="img/4.jpg" alt="" width="140" height="160"></a></li>
		<li><a href=""><img src="img/5.jpg" alt="" width="140" height="160"></a></li>
		<li><a href=""><img src="img/6.jpg" alt="" width="140" height="160"></a></li>
        <li><a href=""><img src="img/7.jpg" alt="" width="140" height="160"></a></li>
		</ul>

	</body>

CSS代码展示

@charset "utf-8";
/* CSS Document */

*{
	padding:0;
	margin:auto;
	list-style:none;
	}

.nav{
	height:100px;
	background-color:#000;
	margin-bottom:20px;
	width:1000px;
}
.nav_logo{
	width: 200px;
	height: 100px;
	float: left;
}
.nav_logo img{
	width: 100%;
	height: 100%;
}
.nav_line{
	width: 30px;
	height: 30px;
	float: right;
	margin-top: -65px;
	margin-right:30px;
}
.nav_line img{
	width: 80%;
	height: 100%;
}
.img_line{
	width: 30px;
	height: 30px;
	float: right;
	margin-top: 30px;
	margin-right: 30px;
}
.img_line img{
	width: 100%;
	height: 100%;
}
.nav_words{
	color: #fff;
	width: 700px;
	height: 100px;
}
.nav_words li{
	float: left;
	width: 80px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.box{
	background:#FFC;
	overflow:hidden;
	text-align:center;
	width:960px;
	}
.box>li{
	width:140px;
	height:160px;
	background:#FC3;
	margin:40px;
	float:left;
	}
@media screen and (min-width:500px) and (max-width:960px){
	.box{
		width: 480px;
	}

}
@media screen and (min-width:960px) {
	.box{
		width:900px;
	}
	.nav{
		width: 960px;
	}
    .img_line{
		display: none;
	}

}
@media screen and (max-width:500px){
	.box{
		width: 500px;
	}
	.nav{
		width: 500px;
	}
	.nav_words{
		display: none;
	}
}