媒体查询的使用

什么是媒体查询？

媒体是指：各种设备；查询是指：检测属于那种设备。
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。

设备类型

all 适用于所有设备
aural 适用于语音和音频合成器
braille 适用于触觉反馈设备
embossed 适用于凸点文字（盲文）印刷设备
handheld 适用于小型或者手提设备
print 适用于打印机
projection 适用于投影图像，如幻灯片
sceen 适用于计算机显示器
tty 适用于使用固定间距字符格的设备，如电传打字机和终端
tv 适用于电视类设备

媒体属性

width 网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)

关键字

and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性 相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

语法

写在head标签里

外联式语法 内嵌式语法 @media only screen and (max-width: 420px) { body { background-color: red; } }

  备注: 多个条件联写
  @media only screen and (width: 320px) and (height: 568px) {}

媒体查询和弹性盒的使用情况

媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒