media属性值需用标准媒体类型（如screen、print）与特性组合，错别字或括号缺失会导致失效；@media可嵌套但不能在声明块内；link的media可阻止下载，CSS中@media则始终加载；断点推荐用px而非rem。
media属性值怎么写才生效
不是所有字符串都能当media用，浏览器只认标准媒体类型+媒体特性组合。常见失效是因为写了错别字或漏了括号，比如把screen拼成scrren，或者(min-width: 768px)少了个左括号。
实际用得最多的是这三类：
-
all：默认值，不用显式写 -
screen：常规屏幕（桌面、手机、平板） -
print：打印预览或调用window.print()时触发
注意：speech和braille等类型虽在规范里，但基本没浏览器支持，别白费劲。
@media规则里能嵌套其他CSS规则吗
不能直接嵌套选择器，但可以嵌套@media本身——也就是媒体查询套媒体查询。比如先判断是screen，再在里面细分prefers-color-scheme: dark。
立即学习“前端免费学习笔记（深入）”；
常见误操作是这样写：
@media screen {
.btn { color: blue; }
@media (hover: hover) { .btn:hover { color: red; } }
}
这合法；但下面这种就不行：
@media screen {
.container {
@media (max-width: 600px) { font-size: 14px; }
}
}
因为@media不能出现在声明块内部。必须平级写，或用and合并条件。
link标签的media属性和CSS里的@media区别在哪
本质一样，都是控制样式是否应用，但作用层级和加载行为不同。
-
<link media="print" href="print.css">：浏览器根本不会下载print.css，除非进入打印模式（节省带宽） -
@media print { ... }：样式表照常下载，只是规则被标记为“仅打印时生效” - 如果同时用了
<link media="print">又在主CSS里写了@media print，两者会叠加，不冲突
性能敏感场景（比如移动端首屏），优先用<link media>隔离大块打印样式，避免无谓解析。
响应式断点用px还是rem更稳妥
用px。虽然rem看起来更“相对”，但@media查询里的min-width等特性，测量的是**视口宽度（viewport width）**，单位是CSS像素，和根字体大小无关。
写@media (min-width: 37.5rem)看似优雅，实则危险——万一用户改了浏览器默认字号（比如从16px调成20px），37.5rem就变成750px，断点全偏移。
所以行业惯例是：
- 断点数值统一用
px（如768px、1024px） - CSS内部布局用
rem或em做弹性缩放 - 真要兼顾缩放体验，可用
em单位（@media (min-width: 48em)），因为1em = 当前元素font-size，而@media里em等价于根字号——前提是没手动改html的font-size
最易忽略的一点：iOS Safari在横竖屏切换瞬间，viewport宽度可能短暂取错值，导致媒体查询闪动。加orientation辅助判断比单靠width更稳。
