Web前端入门第 47 问：CSS @media 媒体查询不要只会视口宽度适配

@media 媒体查询的出现解决了什么问题？
曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。
@media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。
媒体查询就像进店试穿衣服一样，穿得上，咱就用这一套；穿不上，咱就换一套；都穿不上，那就还是穿进店时身上这套吧~~
媒体查询

使用媒体查询之前，先要明白 媒体 二字是指的用户软件设备（比如：电脑中浏览器、网页打印预览等）。
媒体查询无法针对某个具体的 HTML 元素做出响应！！
也无法针对特定的硬件设备做出响应（比如：小米手机、苹果手机等）！！
它只能对用户设备的固定特性做出响应（比如浏览器的可视宽度，是否支持鼠标悬停，设备像素密度等）！！
语法

1. @media <media-query-list> {
2.   <rule-list>
3. }

复制代码

一个简单示例

查询媒体宽度在某个范围内时，设置不同的背景色：

1.   媒体查询应用

复制代码

效果：

指定媒体类型

以上媒体查询在未指定媒体类型时，默认为 all 全部媒体类型，将会应用于屏幕和打印预览~
可使用关键字指定 screen 指定用于屏幕或 print 指定用于打印。

1.   媒体查询应用

复制代码

可在浏览器中 ctrl + p 查看打印样式：

使用逻辑运算符

使用逻辑运算符 and 、 not 、 only 、 , 、 or，可以组合多个媒体查询条件，实现更复杂的逻辑判断。
and 用于多个查询条件同时匹配时才应用样式：

1. @media screen and (min-width: 320px) and (max-width: 600px) {
2.   .box {
3.     line-height: 3;
4.   }
5. }

复制代码

not 用于查询条件不匹配时才应用样式：

1. @media not screen and (min-width: 600px) {
2.   /* 指定屏幕设备宽度不大于 600px 时，背景色为 #ffa947 */
3.   .box {
4.     background-color: #ffa947;
5.   }
6. }

复制代码

only 仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 only 时，较老的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。 --- 摘自 MDN

1. @media only screen and (max-width: 600px) {
2.   /* 指定屏幕设备宽度小于 600px 时，字体色为 #ff4757 */
3.   .box {
4.     color: #ff4757;
5.   }
6. }

复制代码

,  和 or 运算符等价，or 在媒体查询第 4 版中加入，仅 2022 年之后的浏览器支持：

1. @media screen, print {
2.   .box {
3.     font-size: 28px;
4.   }
5. }
6. @media (not (color)) or (not (hover)) {
7.   .box {
8.     font-weight: bold;
9.   }
10. }

复制代码

需特别注意：逻辑运算符后面必须有至少一个空格！！比如 not(hover) 将不生效，必须写成 not (hover)。
新语法

媒体查询第 4 版引入了一种新的范围语法，使用此语法需特别注意浏览器兼容性：
支持的运算符有：等于 =、小于 =。
[code]/* @media (max-width: 600px) { ... } 等价于 */@media (width