一、媒体查询
<1>作用
- 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
- @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
<2>使用方式1
<link rel="stylesheet" type="text/css" href="demo010.css" media="screen and (min-width:1024px)"/>
<link rel="stylesheet" type="text/css" href="demo011.css" media="screen and (max-width:1024px) and (min-width:680px)"/>
<link rel="stylesheet" type="text/css" href="demo012.css" media="screen and (max-width:680px)"/><(min-width:1024px)>代表当视口的宽大于1024px时所表现的状态,一般用与PC端；
<(max-width:1024px) and (min-width:680px)>代表当视口的宽大于680px小于1024px时所表现的状态，一般用与paid；
<(max-width:680px）>代表视口大小小于680px是所表现的状态，一般用于手机；
<2>使用方式2
@medis screen and (max-width:600px){
body{
background-color:red;
}}
@medis screen and (max-width:960px){
body{
background-color:yelow;
}}
@medis screen and (min-width:600px) and (max-width:960px){
body{
background-color:blue;
}}
二、响应式设计
（1）<效果图>
（PC端）
（paid显示器没PC的大所以中间放不下三个div就把右边的移到下边）
（手机端显示器相对于其他俩个最小，中间的部分只能放一个div说以只能让三个div竖直排列）
（2）代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>响应式设计</title>
<link rel="stylesheet" type="text/css" href="demo010.css" media="screen and (min-width:1024px)"/>
<link rel="stylesheet" type="text/css" href="demo011.css" media="screen and (max-width:1024px) and (min-width:680px)"/>
<link rel="stylesheet" type="text/css" href="demo012.css" media="screen and (max-width:680px)"/>
</head>
<body>
<div class="hidden">这是头部</div>
<div class="content clearfix">
<div class="right">这是右边</div>
<div class="center">这是中间</div>
<div class="left">这是左边</div>
</div>
<div class="footer">这是最下面的</div>
</body>
</html>
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:20%;
height:300px;
float:left;
background:#ff0;
}
.center{
width:55%;
height:300px;
margin:0 2.5%;
float:left;
background:#0ff;
}
.left{
width:20%;
height:300px;
float:left;
background:#f0f;
}
（PC端）
----------
body{
margin:0;
}
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:20%;
height:300px;
float:left;
background:#ff0;
}
.center{
width:75%;
height:300px;
margin:0 2.5%;
float:left;
background:#0ff;
}
.left{
width:100%;
height:300px;
/* float:left; */
background:#f0f;
clear:both;
padding:10px 0px;;
}
paid
----------
body{
margin:0;
}
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:100%;
height:300px;
background:#ff0;
}
.center{
width:100%;
height:300px;
background:#0ff;
}
.left{
width:100%;
height:300px;
background:#f0f;
}
手机
----------
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。