导航栏的响应式布局

知识点：css3媒体查询表达式，rem单位

html代码

	<ul>
		<li>
			<a href="#">推荐</a>
		</li>
		<li>
			<a href="#">热点新闻</a>
		</li>
		<li>
			<a href="#">影视厅</a>
		</li>
		<li>
			<a href="#">短视频</a>
		</li>
		<li>
			<a href="#">快乐时光</a>
		</li>
		<li>
			<a href="#">知识课堂</a>
		</li>
	</ul>

css代码

	*{
		margin:0;
		padding:0;
	}
	a{
		text-decoration:none;
		color:#000;
	}
	ul{
		width:100%;
		display:flex;
		justify-content: space-around;
		padding-top:5px;
		list-style-type:none;
		transition: all 0.6s ease;
	}
	li{
		padding:10px;
	}
	li:hover{
		background-color:#ed4040;
		border-radius: 5px;
	}
	@media screen and (max-width:1536px){
		a{
			font-size:1rem;
		}
	}
	@media screen and (max-width:1024px){
		a{
			font-size:1.5rem;
		}
	}
	@media screen and (max-width:600px){
		ul{
			width:150px;
			height:700px;
			flex-direction: column;
			text-align:center;
		}
		li{
			margin-left:5px;
		}
		a{
			font-size:1rem;

		}
	}

核心代码

	ul{
		width:100%;
		display:flex;
		justify-content: space-around;
		padding-top:5px;
		list-style-type:none;
		transition: all 0.6s ease;
	}
	@media screen and (max-width:1536px){
		a{
			font-size:1rem;
		}
	}
	@media screen and (max-width:1024px){
		a{
			font-size:1.5rem;
		}
	}
	@media screen and (max-width:600px){
		ul{
			width:150px;
			height:700px;
			flex-direction: column;
			text-align:center;
		}
		li{
			margin-left:5px;
		}
		a{
			font-size:1rem;

		}
	}