响应式布局（媒体 media）

媒体类型

• all 所有媒体
• braille 盲文触觉设备
• embossed 盲文打印机
• print 手持设备
• projection 打印预览
• screen 彩屏设备
• speech ‘听觉’类似的媒体类型
• tty 不适用像素的设备
• tv 电视

媒体特性

• min-width 分辨率宽度大于等于设置值的时候识别
• max-width 分辨率宽度小于等于设置值的时候识别
• orientation:portrait 竖屏
• orientation:landscape 横屏
• -webkit-min-device-pixel-ratio:2 像素比

关键字

• and 和、与 （连接媒体特性）

• not 排除指定媒体类型

• only 指定某种特定的媒体类型

  • 很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

常规尺寸

@media all and (min-width:1200px) {
    //大分辨率 PC、TV
}

@media all and (min-width:850px) and (min-width:1199px) {
    //中等分辨率 PC小分辨率、平板
}

@media all and (min-width:700px) and (min-width:849px) {
    //PAD设备
}

@media all and (min-width:480px) and (min-width:699px) {
    //高分辨率手机、低分辨率平板
}

@media all and (min-width:479px) {
    //手机设备
}