媒体查询详解析

0.什么是媒体查询（Media Queries）

• CSS媒体查询为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用
• 媒体 指的就是各种设备 (移动设备, PC设备)
• 查询 指的是要检测属于哪种设备
• 媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

1.媒体类型（media-type）

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

• all
  适用于所有设备。
• print
  适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体。）
• screen
  主要用于屏幕。
• speech
  主要用于语音合成器。

注：常用类型即以上，废弃的不做叙述，防止误导。

2.媒体特性（Media features）

媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号（）括起来。

• any-hover 是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？

• any-pointer 可用的输入机制中是否有任何指针设备，如果有，它的精度如何？

• aspect-ratio 视窗（viewport）的宽高比

• color 输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0

• color-gamut 用户代理和输出设备大致程度上支持的色域

• color-index 输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0

• display-mode 应用程序的显示模式，如web app的manifest中的display 成员所指定

• forced-colors 检测是user agent否限制调色板

• grid 输出设备使用网格屏幕还是点阵屏幕？

• height 视窗（viewport）的高度

• hover 主要输入模式是否允许用户在元素上悬停

• inverted-colors user agent或者底层操作系统是否反转了颜色

• light-level 环境光亮度

• monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0

• orientation 视窗（viewport）的旋转方向

• overflow-block 输出设备如何处理沿块轴溢出视窗(viewport)的内容

• overflow-inline 沿内联轴溢出视窗(viewport)的内容是否可以滚动？

• pointer 主要输入机制是一个指针设备吗？如果是，它的精度如何？

• prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案

• prefers-contrast 探测用户是否有向系统要求提高或降低相近颜色之间的对比度

• prefers-reduced-motion 用户是否希望页面上出现更少的动态效果

• prefers-reduced-transparency 用户是否倾向于选择更低的透明度

• resolution 输出设备的像素密度（分辨率）

• scan 输出设备的扫描过程（适用于电视等）

• scripting 探测脚本（例如 JavaScript）是否可用

• update 输出设备更新内容的渲染结果的频率

• width 视窗（viewport）的宽度，包括纵向滚动条的宽度

3.逻辑操作符（logical operators）

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

• and
  and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真
  [注意]在不使用not或only操作符的情况下，媒体类型是可选的，默认为all
  满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

@media (min-width: 700px) and (orientation: landscape) { ... }
or

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符

满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

• not

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media  not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }

• only
  only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media=“only”，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式
　　所以，在使用媒体查询时，only最好不要忽略