css 媒体查询 @media

@media screen and (){} 注：and和括号中间要空一格,括号里min-width max-width是少于等于 或大于等于

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/s320.css" media="screen and (max-width:639px)"/>/*根据不同的设备引用不同的css样式文件*/
		<link rel="stylesheet" href="css/s640.css" media="screen and (min-width:640px)"/>
		<style>
				@media screen and (max-width:540px){
					body{
						background-color: blue;
					}
				}
				@media screen and (min-width: 541px){
					body{
						background-color: red;
					}
				}
				@media screen and (min-width: 970px) {
					body{
						background-color: green;
					}
				}
	
		</style>
	</head>
	<body>
		<div>1
		</div>
		<div>2
		</div>
	</body>
</html>

　　

posted @ 2020-04-01 15:45  howhy  阅读(83)  评论(0)    收藏  举报