响应式布局

概念

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

你可能感兴趣的:(响应式布局)