媒体查询本身不导致闪烁，真正引发布局跳动的是样式加载时机、容器尺寸不稳定及断点切换重排；优化关键是让结构就绪、尺寸锁定、样式可用，关键CSS须内联且不含media属性。
媒体查询本身不导致闪烁，真正引发布局跳动的是它所依赖的样式加载时机、容器尺寸稳定性以及断点切换时的重排行为。优化核心不是“调顺序”，而是让媒体查询生效前，结构已就绪、尺寸已锁定、样式已可用。
关键CSS必须内联，且不含media属性
浏览器对带media属性的<link rel="stylesheet">会跳过阻塞逻辑——哪怕你写的是media="(min-width: 768px)"，在手机上它就被当成“不用的样式”，异步加载，首屏关键规则压根不会及时应用。结果就是HTML先渲染无样式的流式结构，等媒体查询样式加载完才突然撑开、收缩或重排。
- 把所有影响首屏布局的媒体查询相关样式（如
.hero-mobile、.nav-desktop中实际用到的部分）提取出来，合并进内联<style></style>块 - 内联块必须放在
最顶部，早于任何<script></script>或<link> - 体积控制在10–14KB以内（gzip后约4–8KB），避免阻塞HTML解析
- 禁用
@import、@media嵌套或条件CSS变量定义——这些都会延迟解析
非首屏媒体查询样式要延迟加载，但不能靠JS动态插入
比如print.css、dark-theme.css、desktop-only.css这类只在特定条件下生效的样式，不该参与首屏渲染链。但用document.createElement("link")插入，预加载器根本看不到，反而更慢。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 推荐写法：
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">——浏览器自动匹配环境，不匹配则异步加载 - 对必须运行时判断的（如用户手动切主题），用
media="print" onload="this.media='all'"+<noscript></noscript>兜底 - 避免在
resize或scroll回调里反复切换class触发媒体查询重计算——改用transform或opacity动画替代display、width等布局属性变更
容器尺寸必须提前锁定，防止媒体查询生效时重排
媒体查询一变，如果容器没有固定宽高比或最小高度，内容就会“弹跳”：比如@media (min-width: 768px) { .card { display: grid; } }，但.card没设aspect-ratio或min-height，网格创建瞬间子项重算尺寸，下方内容被顶走。
立即学习“前端免费学习笔记（深入）”；
- 用
aspect-ratio: 16 / 9设定响应式容器比例，配合width: 100%和height: auto - 兼容旧版iOS可fallback为
padding-top: 56.25%+position: relative+ 绝对定位子元素 - 文本容器加
line-height和min-height，锁住行高，避免字体加载完成前后跳动 - 禁用父级
flex: 1或height: 100%覆盖比例占位
慎用@layer管理媒体查询样式层级
第三方UI库常自带媒体查询，若它的CSS晚于业务样式加载，按钮可能先显示默认色，再闪一下变成主题色——这不是加载慢，是层叠顺序失控。
- 用
@layer base, components, utilities显式声明层级，确保重置类、布局工具、组件样式按预期顺序叠加 - 业务CSS中媒体查询规则统一归入
@layer components，避免被后来的@layer utilities意外覆盖 -
@layer不改变加载时机，但能防止因引入顺序错乱导致的样式回退与重绘
