1,媒体查询
使用css3中的媒体查询，可以让一个页面适用不同的终端（或屏幕尺寸），从而有更好的体验
（Media Queries）有两个重要的部分，一个是媒体类型，第二个是媒体特性。
媒体类型:css2中一个常见的属性，也是一个非常有用的属性，可以通过媒体的类型对不同的设备
指定不同的样式。
w3c中有10中媒体类型
All:所有设备
Braille:盲人用点字法触觉回馈设备
Embossed:盲文打印机
Handheld:便携设备
Print:打印用纸或打印预览视图
Projection：各种头晕设备
Screen:电脑显示
Speech:语音或音频合成器
Tv:电视类型设备
Try:使用固定密度字母栅格的媒介，比如打字机和终端
（all.screen,print为常见的三种媒体类型）
媒体的引用方法：link标签，@import和css3中的@media
link方法引入媒体类型其实就是在<link>标签中的media属性来指定不同的媒体类型
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
@import方法
@import可以引用样式文件，同样也可以用来引用媒体类型。
@import引入媒体类型的两种主要方式
@importurl(reset.css) screen; @importurl(print.css) print;
一种是在样式中通过@import调用另一个样式文件
<head> <style type="text/css"> @importurl(style.css) all; </style> </head>
@media 方法
@media是Css3中新引进的一个特性，被称为媒体查询，在页面中也可以通过这个属性来引入媒体
类型。@media引入媒体类型和@import有点类似
（1）在样式文件中引用媒体类型：
@media screen { 选择器{/*你的样式代码写在这里…*/} }
（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>
2，响应式设计（RWD）
RWD能让你的网页在不同的设备中展示不同的设计风格
（1），流体网格
每个网格格子使用百分比单位来 控制网格大小
（2），弹性图片
弹性图片是不给图片设置固定的尺寸，而是根据流体网格进行缩放，用于适应各种网格尺寸，
img {max-width:100%;}
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
@media (min-device-600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-800px){ img[data-src-800px] { content:attr(data-src-800px,url); } }
3，媒体查询
4，屏幕分辨率
5，主要断点值
媒体查询中，其中媒体特性“min-width"和”max-width“对应的属性值就是响应设计中的断点值。
6，meta标签
meta标签被称为可视区域meta标签
<meta name=”viewport” content=”” />
7，不同设备的分辨率设置
1024px屏幕
@media screen and (max-width : 1024px) { /* 样式写在这里 */ }
ipad横板
@media screen and (max-device- 1024px) and (orientation: landscape) { /* 样式写在这 */ }
ipad竖屏
@media screen and (max-device- 768px) and (orientation: portrait) { /* 样式写在这 */ }
iphone和smartphones
@media screen and (min-device- 320px) and (min-device- 480px) { /* 样式写在这 */ }