style 标签的 media 属性仅指定生效媒介类型（如 print、screen），不支持媒体查询表达式；响应式断点必须用 @media 规则写在 style 内部或 CSS 文件中，且需配合正确的 viewport meta 标签才能生效。
style 标签的 media 属性不是用来写媒体查询条件的，它只控制整块 CSS 的**生效媒介类型**，比如 print 或 screen。想实现“在不同屏幕宽度下切换样式”，不能靠这个属性，得用 @media 规则写在 style 内部。
style 标签的 media 属性只能指定媒介类型
它接收的是标准媒介类型字符串，不是媒体查询表达式。浏览器只根据这个值决定“要不要解析这块 CSS”，不参与任何尺寸判断。
-
<style media="print">...</style>：仅在打印预览或调用window.print()时生效，普通浏览下完全忽略 -
<style media="screen">...</style>：显式声明只对屏幕设备生效，比不写更稳妥（尤其旧版 Safari/Electron） -
<style media="screen, print">...</style>：合法，但同一套样式同时用于屏幕和打印，无法做差异化响应 -
<style media="(max-width: 768px)">...</style>：语法错误，浏览器直接跳过整段style，不会报错也不会渲染
@media 规则必须写在 style 标签内部或 CSS 文件里
真正做响应式断点的逻辑，要靠 @media 块，且必须放在 CSS 上下文中——也就是 <style></style> 标签内、外部 .css 文件里，或元素的 style 属性中（不推荐）。
- 正确位置：
<style> body { color: #333; } @media (max-width: 768px) { body { font-size: 14px; } } </style> - 错误位置：
<style media="(max-width: 768px)"> body { ... } </style>—— 这里的media属性不接受括号表达式 - 别把
@media当字符串塞进 JS：const mq = "@media (max-width: 768px) { ... }";—— 完全无效，CSS 引擎根本看不到 -
@media块里不能再嵌套其他@规则（如@supports），也不能写 HTML 或 JS
viewport meta 标签没配，media 查询基本白写
再准的 @media (max-width: 768px)，遇上没设 <meta name="viewport" content="width=device-width, initial-scale=1"> 的页面，手机浏览器会以 980px 左右的桌面视口渲染，导致断点永远不触发。
立即学习“前端免费学习笔记（深入）”；
- iOS 微信客户端对
viewport解析更严格，漏掉initial-scale=1可能导致双击放大失效 - 如果用了
user-scalable=no，务必手动双指缩放测试是否真禁用了 -
@media和viewport不在同一层，CSS 无法覆盖或修正视口行为
最容易被忽略的一点：很多人以为写了 @media (max-width: 768px) 就万事大吉，其实断点是否生效，取决于内容撑开逻辑，而不是设备型号。一段文字在 320px 下换行难看？那就设 @media (min-width: 375px) 调整字体大小，而不是硬套“手机 ≤767px”这种通用值。
