Web前端入门第 47 问：CSS @media 媒体查询不要只会视口宽度适配
@media 媒体查询的出现解决了什么问题？曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。
@media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。
媒体查询就像进店试穿衣服一样，穿得上，咱就用这一套；穿不上，咱就换一套；都穿不上，那就还是穿进店时身上这套吧~~
媒体查询
使用媒体查询之前，先要明白 媒体 二字是指的用户软件设备（比如：电脑中浏览器、网页打印预览等）。
媒体查询无法针对某个具体的 HTML 元素做出响应！！
也无法针对特定的硬件设备做出响应（比如：小米手机、苹果手机等）！！
它只能对用户设备的固定特性做出响应（比如浏览器的可视宽度，是否支持鼠标悬停，设备像素密度等）！！
语法
@media <media-query-list> {
<rule-list>
}一个简单示例
查询媒体宽度在某个范围内时，设置不同的背景色：
媒体查询应用效果：
指定媒体类型
以上媒体查询在未指定媒体类型时，默认为 all 全部媒体类型，将会应用于屏幕和打印预览~
可使用关键字指定 screen 指定用于屏幕或 print 指定用于打印。
媒体查询应用可在浏览器中 ctrl + p 查看打印样式：
使用逻辑运算符
使用逻辑运算符 and 、 not 、 only 、 , 、 or，可以组合多个媒体查询条件，实现更复杂的逻辑判断。
and 用于多个查询条件同时匹配时才应用样式：
@media screen and (min-width: 320px) and (max-width: 600px) {
.box {
line-height: 3;
}
}not 用于查询条件不匹配时才应用样式：
@media not screen and (min-width: 600px) {
/* 指定屏幕设备宽度不大于 600px 时，背景色为 #ffa947 */
.box {
background-color: #ffa947;
}
}only 仅在整个查询匹配时才应用样式。这对于防止较老的浏览器应用所选样式很有用。当不使用 only 时，较老的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。 --- 摘自 MDN
@media only screen and (max-width: 600px) {
/* 指定屏幕设备宽度小于 600px 时，字体色为 #ff4757 */
.box {
color: #ff4757;
}
},和 or 运算符等价，or 在媒体查询第 4 版中加入，仅 2022 年之后的浏览器支持：
@media screen, print {
.box {
font-size: 28px;
}
}
@media (not (color)) or (not (hover)) {
.box {
font-weight: bold;
}
}需特别注意：逻辑运算符后面必须有至少一个空格！！比如 not(hover) 将不生效，必须写成 not (hover)。
新语法
媒体查询第 4 版引入了一种新的范围语法，使用此语法需特别注意浏览器兼容性：
支持的运算符有：等于 =、小于 =。
/* @media (max-width: 600px) { ... } 等价于 */@media (width
页:
[1]