各位观众，大家好！我是今天的主讲人，咱们今天来聊聊CSS Media Queries Level 4 的那些高级花活儿，保证让你的响应式布局玩出新高度！
一、 Media Queries Level 4 概览
Media Queries Level 4 相较于之前的版本，主要增强了两个方面：
- Range Syntax (范围语法)：更简洁、更直观地表达媒体查询的范围。
- Logical Operators (逻辑运算符)：更灵活地组合多个媒体特征，实现更复杂的条件判断。
二、 Range Syntax：告别冗余，拥抱简洁
在 Media Queries Level 3 中，我们通常使用 min-width 和 max-width 组合来定义一个屏幕宽度范围，例如：
@media (min-width: 600px) and (max-width: 900px) {
/* 样式规则 */
}虽然能实现需求，但略显繁琐。Media Queries Level 4 引入了范围语法，让代码更简洁：
@media (600px <= width <= 900px) {
/* 样式规则 */
}是不是清爽多了？这种语法支持以下比较运算符：
| 运算符 | 含义 |
|---|---|
< |
小于 |
<= |
小于等于 |
> |
大于 |
>= |
大于等于 |
更进一步：使用 width 的简写
如果只针对 width 属性进行范围查询，还可以进一步简化：
@media (width >= 600px) and (width <= 900px) { /* 传统写法 */ }
@media (600px <= width <= 900px) { /* 范围语法 */ }
@media (600px <= width <= 900px) { /* 范围语法 */ }
/* 更简写 (针对 width) */
@media (600px <= width <= 900px) {
/* 样式规则 */
}示例：根据屏幕宽度应用不同的背景颜色
body {
background-color: #eee; /* 默认背景色 */
}
/* 宽度小于 600px 时，背景色为红色 */
@media (width < 600px) {
body {
background-color: red;
}
}
/* 宽度在 600px 到 900px 之间时，背景色为绿色 */
@media (600px <= width <= 900px) {
body {
background-color: green;
}
}
/* 宽度大于 900px 时，背景色为蓝色 */
@media (width > 900px) {
body {
background-color: blue;
}
}三、 Logical Operators：玩转逻辑，掌控全局
Media Queries Level 4 增强了逻辑运算符的使用，提供了 and、or 和 not 三个关键词，使得我们可以构建更复杂的媒体查询条件。
and(与)：要求所有条件都必须满足。or(或)：只要满足其中一个条件即可。not(非)：对条件取反。
1. and 的妙用
and 运算符在之前的版本中已经存在，但它的用法在 Level 4 中并没有改变，只是和其他新的运算符配合起来威力更大。
示例：同时满足横屏和宽度大于 768px 的条件
@media (orientation: landscape) and (width > 768px) {
/* 样式规则 */
}2. or 的魅力
or 运算符允许我们指定多个备选条件，只要满足其中一个，样式就会生效。
示例：针对 iPhone X 及以上机型（模拟） 或者 横屏模式 应用样式
/* 模拟 iPhone X 及以上机型 (假设设备像素比大于 2.5) */
@media (device-pixel-ratio > 2.5) or (orientation: landscape) {
/* 样式规则 */
/* 这种写法比旧版本更清晰，避免了嵌套 */
}重要提示：or 的优先级问题
在使用 or 运算符时，需要注意优先级问题。如果需要组合多个条件，最好使用括号明确优先级。
错误示例：
@media (min-width: 600px) and (orientation: portrait) or (hover: hover) {
/* 样式规则 - 这可能不是你想要的结果 */
}上面的代码可能被解析为：(min-width: 600px) and (orientation: portrait) 或者 (hover: hover)。
正确示例：
@media (min-width: 600px) and ((orientation: portrait) or (hover: hover)) {
/* 样式规则 - 明确了优先级 */
}3. not 的反转乾坤
not 运算符用于对条件取反，表示不满足指定条件时应用样式。
示例：当屏幕不是打印模式时应用样式
@media not print {
/* 样式规则 - 在屏幕上显示，但在打印时隐藏 */
}注意事项：not 的兼容性
not 运算符在一些老旧浏览器中可能存在兼容性问题，所以在使用时需要谨慎，或者使用其他方式替代。
4. 组合拳：and、or、not 的混合使用
我们可以将 and、or 和 not 组合起来，构建更复杂的媒体查询条件。
示例：针对非打印设备，且宽度在 600px 到 900px 之间，或者支持悬停效果的设备应用样式
@media not print and ((600px <= width <= 900px) or (hover: hover)) {
/* 样式规则 */
}四、 实际应用案例
-
响应式导航栏
根据屏幕宽度和设备方向，动态调整导航栏的布局。
.nav { display: flex; justify-content: space-between; align-items: center; padding: 10px; } .nav-links { display: none; /* 默认隐藏链接 */ } /* 宽度大于 768px 时，显示导航链接 */ @media (width > 768px) { .nav-links { display: flex; gap: 20px; } } /* 横屏模式下，字体更大 */ @media (orientation: landscape) { .nav-links a { font-size: 1.2em; } } -
针对不同设备类型的优化
根据设备类型（触摸屏或非触摸屏）应用不同的样式。
/* 针对触摸屏设备 */ @media (pointer: coarse) { /* 增大按钮的点击区域 */ button { padding: 15px 30px; } } /* 针对非触摸屏设备 */ @media (pointer: fine) { /* 鼠标悬停时显示更多信息 */ button:hover::after { content: " (Click for details)"; } } -
深色/浅色模式切换
根据用户的系统偏好设置，自动切换深色/浅色模式。
body { background-color: #fff; color: #000; } /* 深色模式 */ @media (prefers-color-scheme: dark) { body { background-color: #333; color: #fff; } }
五、兼容性注意事项
虽然 Media Queries Level 4 提供了很多强大的功能，但在实际使用中需要注意兼容性问题。
- 浏览器支持：确保目标浏览器支持 Media Queries Level 4 的语法。
- polyfill/transpiler：对于不支持的浏览器，可以使用 polyfill 或 transpiler 进行兼容。
- 渐进增强：优先保证基本功能在所有浏览器中可用，然后针对支持的浏览器应用高级特性。
六、总结
Media Queries Level 4 极大地提升了 CSS 媒体查询的表达能力和灵活性。掌握这些高级用法，可以帮助我们构建更优雅、更强大的响应式布局。
- 范围语法：简化了范围查询的写法，提高了代码可读性。
- 逻辑运算符：增强了条件判断的灵活性，可以构建更复杂的媒体查询条件。
- 实际应用：根据设备类型、屏幕方向、用户偏好等条件，应用不同的样式。
希望今天的讲座能对大家有所帮助。记住，灵活运用 Media Queries Level 4，让你的网页在各种设备上都能呈现最佳效果！谢谢大家！
附：一些有用的 Media Queries 特性
| 特性 | 描述 | 示例 |
|---|---|---|
width |
视口宽度。 | @media (width > 600px) { ... } |
height |
视口高度。 | @media (height < 400px) { ... } |
device-width |
渲染表面的宽度（设备屏幕的宽度）。 | @media (device-width: 320px) { ... } |
device-height |
渲染表面的高度（设备屏幕的高度）。 | @media (device-height: 568px) { ... } |
orientation |
设备方向：portrait（竖屏）或 landscape（横屏）。 |
@media (orientation: landscape) { ... } |
aspect-ratio |
视口宽高比。 | @media (aspect-ratio: 16/9) { ... } |
device-aspect-ratio |
设备屏幕宽高比。 | @media (device-aspect-ratio: 3/2) { ... } |
resolution |
设备像素密度。 | @media (min-resolution: 150dpi) { ... } 或 @media (min-resolution: 1.5dppx) { ... } |
scan |
扫描类型：interlace（隔行扫描）或 progressive（逐行扫描）。 |
@media (scan: progressive) { ... } |
grid |
设备是否是网格设备（例如，文本模式终端）。0 表示否，1 表示是。 |
@media (grid: 1) { ... } |
update |
设备更新内容的能力：none（无法更新）、slow（更新慢）或 fast（更新快）。 |
@media (update: fast) { ... } |
overflow-block |
块级溢出处理方式：none（无溢出）、scroll（滚动）或 optional-paged（可选分页）。 |
@media (overflow-block: scroll) { ... } |
overflow-inline |
行内溢出处理方式：none（无溢出）、scroll（滚动）。 |
@media (overflow-inline: scroll) { ... } |
color |
设备支持的颜色位数。 | @media (min-color: 8) { ... } |
color-gamut |
设备支持的颜色范围：srgb、p3、rec2020。 |
@media (color-gamut: p3) { ... } |
color-index |
设备支持的颜色索引数。 | @media (color-index: 256) { ... } |
monochrome |
设备支持的单色位数。 | @media (monochrome) { ... } 或 @media (min-monochrome: 1) { ... } |
inverted-colors |
设备是否反转颜色：none（不反转）或 inverted（反转）。 |
@media (inverted-colors: inverted) { ... } |
prefers-reduced-motion |
用户是否请求减少动画效果：no-preference（无偏好）或 reduce（减少动画）。 |
@media (prefers-reduced-motion: reduce) { ... } |
prefers-contrast |
用户是否请求更高或更低的对比度：no-preference（无偏好）、more（更高对比度）或 less（更低对比度）。 |
@media (prefers-contrast: more) { ... } |
prefers-color-scheme |
用户是否请求浅色或深色主题：light（浅色）、dark（深色）或 no-preference（无偏好）。 |
@media (prefers-color-scheme: dark) { ... } |
prefers-reduced-transparency |
用户是否请求减少透明度：no-preference（无偏好）或 reduce（减少透明度）。 |
@media (prefers-reduced-transparency: reduce) { ... } |
pointer |
指针设备的精度：none（无指针设备）、coarse（粗略指针，如触摸屏）或 fine（精确指针，如鼠标）。 |
@media (pointer: coarse) { ... } |
hover |
设备是否支持悬停：none（不支持悬停）或 hover（支持悬停）。 |
@media (hover: hover) { ... } |
any-pointer |
任何可用的指针设备的精度：none、coarse 或 fine。 |
@media (any-pointer: coarse) { ... } |
any-hover |
任何可用的输入设备是否支持悬停：none 或 hover。 |
@media (any-hover: hover) { ... } |
掌握这些特性，结合范围语法和逻辑运算符，你就可以构建出非常强大和灵活的响应式布局。 祝大家编程愉快！