媒体查询之变化导航

最新推荐文章于 2023-02-15 22:05:26 发布

爱生活，爱编程

最新推荐文章于 2023-02-15 22:05:26 发布

阅读量418

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_15009739/article/details/104002721

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

要求很简单

屏幕宽>= 768px 就一行显示

小于<768px　就每行显示３个tab

<!DOCTYPE html>
<html>
<head>
	<title>响应式导航栏</title>

	<style type="text/css">
			*{
				padding: 0;
				margin:0;
				/*width: 750px;*/
			}
			/* 不变的写在最上面，变的写在媒体查询器中！*/
			ul{
				height: 60px;
				margin: 0 auto;
				list-style: none;
			}
			ul li{ 
				height: 60px;
				line-height: 60px;
				color:white;
				background-color: pink;
				float: left;
				text-align: center;
			}


			@media screen and (max-width: 767px){
				ul {
					width: 100%;
				}
				ul li {
					width: 33.33%;
				}
			}		

			@media screen and (min-width: 768px) {
				ul{
					width: 750px;
				}
				ul li{
					width:93.75px; 
				}
	</style>
</head>
<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
</body>
</html>

代码就不多介绍了，这里有个小心得，就是

不变的代码写在媒体查询的外边，变得，写在媒体查询里面！