media属性仅控制样式是否生效，不识别设备；它仅在匹配当前上下文（如打印、视口变化）且未被覆盖或禁用时应用，需明确媒介类型与条件组合，语法错误将导致整条规则被忽略。
media属性只控制样式是否生效，不控制设备识别
media 属性不是“检测设备”，它只是告诉浏览器：“这段 CSS 仅在满足条件时参与渲染”。浏览器是否执行、是否下载、是否应用，取决于：media 值是否匹配当前上下文（比如用户点了打印、窗口宽度变化）、是否被更高优先级规则覆盖、以及用户是否禁用了相关输出（如打印背景色）。
常见错误是写 media="handheld" 期待适配手机——现代浏览器基本忽略这个值；写 media="(min-width: 768px)" 漏掉 screen，结果在打印预览里也触发，意外覆盖 print 样式。
- 必须用
screen and (min-width: 768px)，and前后都要有空格，否则整条规则被忽略 - 避免依赖
device-width：它受 DPR 影响大，Safari 支持不稳定；优先用width（视口宽度） - 多个
<style></style>共存时，层叠顺序按 HTML 中出现顺序，但前提是它们的media条件都满足
怎么写 media 值才能精准命中目标场景
最稳妥的是明确媒介类型 + 条件组合，而不是靠模糊值碰运气。
-
media="screen"：默认行为，不用写也生效，显式写上更清晰 -
media="print"：仅在打印预览或调用window.print()时生效 -
media="screen and (max-width: 480px)"：小屏移动设备（比handheld可靠） -
media="screen and (min-width: 1200px)"：桌面大屏，注意和移动端断点不要重叠（比如一个用max-width: 768px，另一个用min-width: 769px） -
media="all and (orientation: landscape)"：横屏时生效，可用于屏幕和打印预览（如果设备支持方向检测）
多个 style 标签共存时的优先级和陷阱
HTML 中多个 <style></style> 按文档流顺序解析，后写的规则优先级更高——但前提是它们的 media 都匹配当前环境。
例如：
<style media="screen">.btn { color: red; }</style><style media="screen and (min-width: 768px)">.btn { color: blue; }</style><style media="print">.btn { color: black; }</style>
在桌面浏览器中，.btn 是蓝色；在打印预览里是黑色；在小屏手机上是红色。但如果第二条写成 media="(min-width: 768px)"（漏掉 screen），它会在打印预览里也生效，可能把 color: black 覆盖掉。
- 所有
media值必须完整、语法正确，否则整块样式被浏览器跳过 - 不要混用
max-width和min-width断点在同一维度上，768px 这个边界容易同时命中两个块，谁赢取决于书写顺序，不可控 -
media="all"会强制应用，但无法替代具体媒介判断；它适合兜底通用样式，但不能替代screen或print
为什么写了 media="print" 却没效果
写了 <style media="print"></style> 不等于打印时自动生效。它只是让浏览器在打印上下文中加载这段 CSS，但真正起作用还卡在几个关键环节：
- 浏览器默认禁用打印背景色和图片，必须加
body { -webkit-print-color-adjust: exact; color-adjust: exact; } - 外部样式表若设了
media="screen"，它不会参与打印计算；但若没设media，它默认是all，会干扰打印样式 - UI 框架（如 Bootstrap）自带
@media print重置，可能清掉你的字号、边距等，得在 DevTools 的 Computed 面板切换到print媒体下查最终值 -
display: none不够——导航栏、按钮等非内容元素要显式隐藏，正文区域要约束尺寸（比如width: 210mm）、重置字体和行高
真正可靠的打印样式，得从基础重置、内容聚焦、颜色强制、链接降级四方面一起动手，光靠 media="print" 开个头远远不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
