css3之媒体查询

最新推荐文章于 2022-04-14 16:40:33 发布

一头小驴

最新推荐文章于 2022-04-14 16:40:33 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/qq_37326058/article/details/104005420

版权

html5/css3的一些特性确实强大。
动画 animation
转化 transform
过渡 translation
很多事情一句话数不清楚，直接通过代码演示一遍最好。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,Initial-scale=0.5,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>	

	<!-- <link rel="stylesheet" type="text/css" media="screen and max-width:2000px and min-width:500px" href="a.css">
	<link rel="stylesheet" type="text/css" media="screen and max-width:500px" href="b.css"> -->
	<link rel="stylesheet" type="text/css"  href="a.css">
	<title>Document</title>
	<!-- <style type="text/css" media="screen"></style> -->
</head>
<body>
	<div id="pagewrap">
		<div id="header"><h2>header</h2><p>头部导航区域</p></div>
		<div id="content">
			<div id="content-left"><h2>content</h2><p>文本内容</p></div>
			<div id="sidebar"><h2>sidebar</h2><p>文本内容</p></div>
		</div>
		
		<div id="footer"><h2>footer</h2><p>文本内容</p></div>
	</div>
</body>
</html>

设备视窗在大于1500px，1000px到1500px，1000px以下三种情况下的设置。

/* @media screen and (max-width:800px){
	#content{
		background-color: red;
	}
	
} */
#pagewrap,#header,#content,#sidebar,#footer{
			padding: 5px;
			border: 1px,solid red;
			margin-bottom: 5px;
			font-family: "微软雅黑";
		}
		#pagewrap{
			width: 1600px;
			margin: 20px auto;
		}
		#header{
			height: 130px;
			width: 1600px;
			background-color: #ff0;
		}
		#content{
			width: 1600px;
			height: 300px;

			
		}
		#content-left{
			width: 1000px;
			
			float: left;
		}
		#sidebar{
			width: 500px;
			float: right;
			background-color: #ff0;
			
		}
		#footer{
			width: 1600px;
			height: 100px;
			background-color: #eee;
			clear: both;
		}
@media screen and (max-width:1500px) and (min-width: 1000px){
	
	#pagewrap{
		width: 50%;
	}
	#content{
		width: 50%;
		
	}
	#sidebar{
		width: 48%;
	}
	#content-left{
		width: 48%;
		background-color: red;
	}
	#footer{
		width: 50%;
	}
	#header{
		width: 50%;
	}
}
@media screen and (max-width:1000px) {
	#pagewrap{
		width: auto;
	}
	#content{
		width: auto;
		/* height: 200px;
		float: none;
		background-color: blue; */
	}
	#content-left{
		float: none;
		background-color: blue;
	}
	#sidebar{
		float: none;
		
		width: auto;
		
		
	}
	#header{
		width: auto;

	}
	#footer{
		width: auto;
	}
}

以上内容来自慕课mooc

一头小驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之媒体查询

html5/css3的一些特性确实强大。动画 animation转化 transform过渡 translation很多事情一句话数不清楚，直接通过代码演示一遍最好。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
复制链接

扫一扫