响应式布局（媒体 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) {    //手机设备
}

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/a5fd5884a631