响应式布局(手机端)

禁止手机页面放大缩小

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

@media screen and(max-width: 750px){}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<style type="text/css">
div1{
	
	width:850px;
	margin: 400px auto;
}



	#div1 ul li{
	
	float:left;
	width:93.75px;
	height:30px;
	background: pink;
	list-style: none;
}


@media screen and(max-width: 750px){
	#div1{
		width:100%;
	}

}
</style>
<body>
	<div id="div1">
	<ul>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		<li>导航</li>
		
		
	</ul>
	</div>
</body>
</html>
发布了171 篇原创文章 · 获赞 29 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_43560272/article/details/102926328
今日推荐