响应式布局（媒体 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
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4484/viewspace-2813650/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
带你走进CSS定位详解
请登录后发表评论
登录
全部评论
