概念
响应式布局(@media)针对不同的屏幕尺寸设置不同的样式，是解决移动端设备屏幕尺寸不同的问题。
优点
面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应的问题
缺点
- 兼容各种设备工作量大，效率低下
- 代码累赘，会出现隐藏无用的元素，加载时间加长
- 是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
语法
@media mediatype and|not|only (media feature){
CSS-Code;
}
参数
mediatype(媒体类型)
screen：计算机屏幕（默认）
print：打印机预览模式（打印页面）
all：适用所有设备
tty：电传打字机及类似的使用等宽字符网格的媒体
tv：电视机类型设备（低分辨率，有限的滚屏能力）
projection：放映机
handheld：手持设备（小屏幕，有限带宽）
braille：盲人点字法反馈设备
aural：语音合成器media feature(媒体取值范围)
max-width：定义输出设备中的页面最大可见区域宽度（<= max-width的意思）
min-width：定义输出设备中的页面最小可见区域宽度（>=min-width的意思）
在w3c标准中，使用 @media 查询，只有all、print、screen这几个媒体类型仍能使用，其他的已被废弃。
注意
由于max-width和min-width都包含数值本身，所以最好错开。
// 一个好的例子
@media (max-width: 767px) {
// col-xs
}
@media (min-width: 768px) and (max-width: 991px) {
// col-sm
}
@media (min-width: 992px) and (max-width: 1199px) {
// col-md
}
@media (min-width: 1200px) {
// col-lg
}
