什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
如何用CSS做响应式布局呢？
1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
参数详解：
width=device-width ：宽度等于当前设备的宽度
initial-scale=1 ：初始的缩放比例（默认为1）
minimum-scale=1 ：允许用户缩放到的最小比例（默认为1）
maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）
user-scalable=no ：用户是否可以手动缩放（默认为no）
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的，Media也不例外。
<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性)｛样式代码｝
/*媒体查询*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%
margin: -10px 0 0 -25%
}
main .center h2 {
font-size: 40px
}
}
/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%
margin: -10px 0 0 -30%
}
#adver .search, #adver .button {
font-size: 20px
}
main .center h2 {
font-size: 35px
}
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none
}
header .link {
width: 100%
line-height: 45px
}
#adver {
padding: 45px 0 0 0
}
#adver .center {
width: 70%
height: 53px
margin: -10px 0 0 -35%
}
#adver .search, #adver .button {
height: 45px
font-size: 18px
}
.sm-visible {
display: block
}
main .center h2 {
font-size: 30px
}
main .center p {
font-size: 15px
}
main figure {
width: 49.2%
}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none
}
header .link {
width: 100%
line-height: 45px
}
header .link li {
width: 25%
}
#adver {
padding: 45px 0 0 0
}
#adver .center {
width: 80%
height: 48px
margin: -10px 0 0 -40%
}
#adver .search, #adver .button {
height: 40px
font-size: 16px
}
.sm-visible {
display: block
}
footer .bottom, footer .version {
font-size: 13px
}
main .center h2 {
font-size: 26px
}
main .center p {
font-size: 14px
}
main figure {
width: 99%
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在我们的移动端的网页设计中，要求很高，1像素的差别就影响我们的整个页面的设计美感。所以，我们需要设配不同的手机屏幕的像素密度的页面，这样，我们就要用到viewport方法。viewport方法就是帮助我们来适配不同手机的屏幕像素密度页面。为了保证我们设计的尺寸不是真，一般会在平米密度可选择性较多的移动设备中，使用viewport技术。这是，我们viewport方法就是帮助我们的来适配不同密度的手机屏幕像素密度。这样，我们可以更好的体现我们的页面的设计美感。
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">实现响应式的方式
Media Query早在CSS2的时候就出现,
@media screen and (max-width:1024px) and (min-width:300px){div{color:red}
}
可以将Media Query看成“Meida Type（判断条件） + CSS（符合条件的样式规则）”,上面代码是屏幕像素在300px-1024px下div的颜色为红色；
css3 vh
vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0
padding: 0
border: 0
}
.demo {
width: 100vw
font-size: 5vw
margin: 0 auto
background-color: #50688B
color: #FFF
}
.demo2 {
width: 80vw
font-size: 5vw
margin: 0 auto
background-color: #ff6a00
}
.demo3 {
width: 50vw
height: 50vh
font-size: 1vw
margin: 0 auto
background-color: #ff006e
color: #FFF
}
</style>
</head>
<body>
<div class="demo">
<h1>宽度100％, 字体5％</h1>
</div>
<div class="demo2">
<h2>宽度80％, 字体5％</h2>
</div>
<div class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</div>
</body>
</html>
响应式布局设计，是指将桌面设备上的网页内容在移动设备上进行优化排版，使用户能够在移动设备上更方便地阅读并操作。其实，如果经常使用不同的设备浏览互联网网页，就会比较容易体会响应式布局设计在移动设备上的应用。
页面的设计根据使用设备环境进行相应的响应和调整，具体的实践方式由多方面组成的。最主要的是三种技术实现的：
1、流体布局，采用了百分比和像素为单位，使布局更加灵活。布局上才用多种方法，呈现不同方式的实现布局设计，简单分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。
其次，可切换的固定布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。
2、媒介查询，通过使用媒介查询，可以获取到设备及设备的特性，及时的响应布局方案，从而解决之前在单纯的布局设计中遗留的问题。
3、弹性图片，伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式。
布局响应是对页面进行设计，需要对相同的内容进行不同的布局设计。一种是桌面向下设计，一种是移动端向上的设计。无论那种设计，都要兼容所有的设备。
随着大屏幕移动设备的普及，随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。给我们提供了更加舒适的界面体验。
