自适应布局利用CSS元素CSS Media Queries Module

作者: Darren 分类: html与css 发布时间: 2019-05-13 16:26
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="utf-8">
	<title>自适应布局</title>
	
	<!-- 360 使用Google Chrome Frame -->
	<meta name="renderer" content="webkit">
	
	<!-- 优先使用 IE 最新版本和 Chrome -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<!-- 开启响应式 移动端页面随着页面宽度进行跳转-->
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,initial-scale=1.0,scale=1.0">
	
	<!-- SEO页面关键词 -->
	<meta name="keywords" content="your keywords">
	
	<!-- SEO页面描述 -->
	<meta name="description" content="your description">
	
	<!-- 设置所有A标签的targrt属性外页面跳转 -->
	<base target="_blank /">
	
	<!-- 设置IE6以下的浏览器支持HTML5的元素 -->
	<!--[if IE]><script src="http://www.321dz.com/wp-content/themes/JieStyle-Two-master/js/html5.js"></script>< ![endif]-->
	
	<!-- favicon,可更改图片类型 -->
	<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
	<style>
@media screen and (min-width: 1024px) {
	.box{
		width: 1000px;
		margin: 0 auto;
	}
	.header{
		width:1000px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-bottom: 25px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
	.content{
		width: 600px;
		height: 600px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		text-align: center;
		line-height: 600px;
		color:yellow;
		font-size:30px;
	}
	.left{
		width: 175px;
		height: 550px;
		background-color: pink;
		float: left;
		margin-right: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;
	}
	.right{
		width: 175px;
		height: 550px;
		background-color: pink;
		float: right;
		margin-left: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;

	}
	.footer{
		width: 1000px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
}
/*min和max用于表达“大于或等于”和“小与或等于”。*/
 @media screen and (min-width: 640px) and (max-width: 1024px) {
	.box{
		width: 640px;
		margin: 0 auto;
	}
	.header{
		width:640px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-bottom: 25px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
	.content{
		width: 640px;
		height: 600px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		text-align: center;
		line-height: 600px;
		color:yellow;
		font-size:30px;
	}
	.left{
		width: 175px;
		height: 550px;
		background-color: pink;
		float: left;
		margin-right: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;
		display: none;
	}
	.right{
		width: 640px;
		height: 550px;
		background-color: pink;
		float: right;
		margin-left: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;

	}
	.footer{
		width: 640px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
 	
 }
 	
 @media screen and (min-width: 1px) and (max-width: 640px){
	.box{
		width: 640px;
		margin: 0 auto;
	}
	.header{
		width:640px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-bottom: 25px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
	.content{
		width: 640px;
		height: 600px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		text-align: center;
		line-height: 600px;
		color:yellow;
		font-size:30px;
	}
	.left{
		width: 175px;
		height: 550px;
		background-color: pink;
		float: left;
		margin-right: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;
		display: none;
	}
	.right{
		width: 640px;
		height: 550px;
		background-color: pink;
		float: right;
		margin-left: 25px;
		margin-top: 25px;
		text-align: center;
		line-height: 550px;
		color:yellow;
		font-size:30px;

	}
	.footer{
		width: 640px;
		height: 200px;
		background-color: pink;
		float: left;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
		line-height: 200px;
		color:yellow;
		font-size:30px;
	}
 	
 }
	</style>
</head>
<body>
	<div class="box">
		<div class="header">header</div>
		<div class="left">left</div>
		<div class="content">content</div>
		<div class="right">right</div>
		<div class="footer">footer</div>
	</div>
</body>
</html>

%title插图%num

(判断页面的宽度在1024大小的时候显示)

%title插图%num

(页面小于1024宽度的时候显示)