手记

响应式布局(媒体 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


0人推荐
随时随地看视频
慕课网APP