html响应式布局media,响应式布局（媒体 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