自适应布局利用CSS元素CSS Media Queries Module
<!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>
(判断页面的宽度在1024大小的时候显示)
(页面小于1024宽度的时候显示)
