移动端和PC端媒体查询-CFANZ编程社区

移动端和PC端媒体查询

松鼠树屋 2022-04-04 阅读 126

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {margin: 0;padding: 0;}
			.box {
				width: 100%;
			}
			
			.box div{
				width: 25%;
				height: 200px;
				background-color: #FFC0CB;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}
			 /* 设备最大宽度1200px的样式 */
	/* 		 @media screen and (max-width: 1200px){
			 	
			 } */
			 
			 /* 平板 */
			 @media screen and (max-width: 768px){
			 	.box div{
			 		width: 50%;
			 	}
			 }
			 
			 /* 手机 */
			 @media screen and (max-width: 480px){
				 .box div{
					width: 100%;
				 }
			 }
			 /* 注意：如果是写max-width 那么必须从大到小写，如果是写min-width，那么设备就要从小往大写 */
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>	
	</body>
</html>

0 条评论