media属性决定是否发起http请求，不匹配时文件根本不会下载；缺screen and前缀会导致浏览器降级为all，旧版safari等可能忽略或误加载。

media 属性决定浏览器是否发起对 CSS 文件的 HTTP 请求——不匹配时，文件根本不会出现在 Network 面板里，不是“加载后不生效”，而是“压根不下载”。

为什么写了 media="(max-width: 768px)" 桌面端还在加载 CSS

这不是 bug，是语法降级：浏览器解析失败时，自动当作 media="all" 处理。常见原因包括：

• media="(max-width: 768px)" 缺少媒体类型前缀（如 screen and），旧版 Safari 或 Electron 会直接忽略整条 <link>
• 括号没闭合、多一个空格、用了中文括号或逗号
• media="mobile" 这类非法值，现代浏览器一律退化为 all
• IE9 及更早版本完全无视 media，所有样式表无条件加载

验证方式只有一种：DevTools → Network → 刷新 → 筛选 .css → 看目标文件是否根本没出现。

screen and (min-width: 768px) 和 (min-width: 768px) 有区别吗

有，而且影响实际生效范围：

• screen and (min-width: 768px) ✅ 显式声明媒体类型 + 特性，兼容性更好，Safari 14+、Chrome 80+、Firefox 69+ 均稳定支持
• (min-width: 768px) ❌ 旧版 Safari（如 iOS 13.7）可能不识别，部分 WebView 直接跳过该 <link>
• 单独写 media="screen" 覆盖太宽，无法做断点控制；media="all" 等价于不写，失去按需意义

推荐统一用 screen and 前缀，避免隐性兼容问题。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

多个 <link media="..."> 同时存在时怎么避免重复加载

关键在断点互斥，否则 768px 视口下两份 CSS 都会被拉下来：

• 错误写法：max-width: 768px 和 min-width: 768px —— 在宽度恰好为 768px 时两者同时匹配
• 正确切法：max-width: 767px 和 min-width: 768px，不留缝隙也不重叠
• 若需进一步限定，可叠加 and (orientation: portrait)，但注意横竖屏切换瞬间可能短暂共存
• 不要依赖 not screen，部分 Android WebView 会直接忽略整个规则

真正省带宽的前提，是每个 media 值在当前环境下最多只命中一个。

rel="preload" + media 才是真·按需预加载

rel="stylesheet" 的 media 控制“是否应用”，而 rel="preload" 的 media 才控制“是否发起请求”：

• 必须配对使用：<link rel="preload" as="style" href="dark.css" media="(prefers-color-scheme: dark)"> + 对应的 <link rel="stylesheet" ...>
• as="style" 不可省略，否则浏览器无法识别资源类型，media 被忽略
• 深色模式未启用时，dark.css 连预加载都不会触发
• 仅适用于 JS 不会动态引入的样式，否则可能重复 fetch

静态 HTML 场景下，这是目前最可控的“零 JS、真跳过”方案；但要注意，它不解决运行时响应式切换问题——那得靠 CSS 内部的 @media 规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！