响应式布局

概念

响应式布局(@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
}