媒体查询media

最新推荐文章于 2024-05-22 12:05:09 发布

bling flower

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/107847451

版权

媒体查询
1.引入meta标签

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

2.使用@media属性设置不同尺寸下的样式

<link rel="stylesheet" media='' href="">
			media属性

方法1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum=scale=1.0,user-scalable=no'>
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		div{
			width: 1000px;
			height: 300px;
			background-color: #ccc
		}

		div p{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
			margin-right: 50px;
		}

		section{
			width: 200px;
			height: 200px;
			/*background: linear-gradient(to left,red 30%,blue 60%,orange);*/
			background:radial-gradient(circle,red,blue,orange);
		}
		
		/*最小宽度700px 最大宽度800px*/
		@media screen and (min-width: 700px) and (max-width: 800px){
			*{
				margin:0px;
				padding:0px;
			}
			div{
				width: 700px;
				height: 300px;
				background-color: pink
			}

			div p{
				width: 100px;
				height: 200px;
				background-color: blue;
				float: left;
				margin-right: 50px;
			}
		}
		
		/*400-700之间*/
		@media screen and (min-width: 400px) and (max-width: 700px){
			*{
				margin:0px;
				padding:0px;
			}
			div{
				width:400px;
				height: 300px;
				background-color: orange
			}

			div p{
				width: 50px;
				height: 100px;
				background-color: green;
				float: left;
				margin-right: 50px;
			}
		}

		/*最大350px*/

		@media screen and (max-width: 350px){
			*{
				margin:0px;
				padding:0px;
			}
			div{
				width: 300px;
				height: 300px;
				background-color: purple
			}

			div p{
				width: 50px;
				height: 50px;
				background-color: yellow;
				float: left;
				margin-right: 20px;
			}
		}





	</style>
</head>
<body>
	<section></section>
	<div>
		<p></p>
		<p></p>
		<p></p>
	</div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum=scale=1.0,user-scalable=no'>
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		div{
			width: 1000px;
			height: 300px;
			background-color: #ccc
		}

		div p{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
			margin-right: 50px;
		}

	</style>
	<link rel="stylesheet" media="screen and (min-width: 700px) and (max-width: 800px)" href="./big.css">

	<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="./middle.css">

	<link rel="stylesheet" media="screen and (max-width: 400px)" href="./small.css">

	
</head>
<body>
	<div>
		<p></p>
		<p></p>
		<p></p>
	</div>
</body>
</html>

small.css

*{
	margin:0px;
	padding:0px;
}
div{
	width: 300px;
	height: 300px;
	background-color: purple
}

div p{
	width: 50px;
	height: 50px;
	background-color: yellow;
	float: left;
	margin-right: 20px;
}

middle.css

*{
	margin:0px;
	padding:0px;
}
div{
	width:400px;
	height: 300px;
	background-color: orange
}

div p{
	width: 50px;
	height: 100px;
	background-color: green;
	float: left;
	margin-right: 50px;
}

big.css

*{
	margin:0px;
	padding:0px;
}
div{
	width: 700px;
	height: 300px;
	background-color: pink
}

div p{
	width: 100px;
	height: 200px;
	background-color: blue;
	float: left;
	margin-right: 50px;
}