媒体查询生效必须同时满足viewport标签正确、媒体类型显式声明、断点顺序合理三个条件；缺一不可，否则在Safari、Electron或真机上大概率失效。
媒体查询不是写了就生效，它必须同时满足三个条件：viewport 标签正确、媒体类型显式声明、断点顺序合理；缺一不可，否则在 Safari、Electron 或真机上大概率白写。
viewport 标签没配对，@media 直接失效
移动端媒体查询失效的第一原因永远是这个：<meta name="viewport" content="width=device-width, initial-scale=1"> 缺失或写错。浏览器默认以 980px 宽度渲染页面，@media (max-width: 768px) 永远不匹配。
- 必须放在
最前面，不能用 JS 动态插入 - 禁用
user-scalable=no、maximum-scale等限制项——它们会干扰视口计算，也违反可访问性 - 别写
width=375或width=1200，device-width是唯一能响应真实设备逻辑像素的值 - 真机调试前，先用 Chrome DevTools 的 Device Toolbar 切换设备并刷新，否则断点不会重新触发
@media screen and (min-width: ...) 才是稳妥写法
@media (max-width: 768px) 在旧版 Safari 和 Electron 中常不生效，根本原因是它等价于 @media all and (max-width: 768px)，而部分渲染引擎对 all 类型下的断点解析不完整，尤其在非屏幕上下文（如打印预览）中会跳过样式计算。
- 显式写
@media screen and (max-width: 768px)或@media screen and (min-width: 769px)，screen不可省 -
only screen中的only是为兼容 IE8 及更早版本设计的，现代项目可直接省略 - 不要混用
min-width和max-width描述同一组断点，比如@media (max-width: 768px)后紧跟@media (min-width: 768px)，临界宽度 768px 会同时命中两个规则，谁赢取决于层叠顺序和选择器权重，不可控
断点顺序写反，小屏样式被大屏覆盖
把大屏规则写在前面、小屏写在后面，是新手最常踩的坑。例如：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
@media screen and (min-width: 1024px) {
.container { width: 1200px; }
}
@media screen and (max-width: 768px) {
.container { width: 100%; }
}
当视口为 600px 时，两条规则都匹配，但后者本应生效——若前者用了更具体的选择器（如 .container.main）或 !important，就会压住后者。
- 推荐「移动优先」结构：基础样式不加
@media，只对更大尺寸做增强 - 统一用
min-width递增写法，如@media screen and (min-width: 768px)→@media screen and (min-width: 992px)→@media screen and (min-width: 1200px) - 断点值建议用
em单位（如45em），而非像素，以响应用户系统字体缩放设置 - 每个断点之间留 1px 间隙（如
min-width: 769px），避免临界值重叠
CSS 变量不能用在 @media 条件里
@media (min-width: var(--sm)) 是非法语法，浏览器会整条忽略，控制台无报错但规则被标灰。CSS 变量的计算时机晚于媒体查询解析阶段，两者不兼容。
- 变量只能在
@media块内部定义或重写，例如：@media screen and (min-width: 768px) { :root { --gap: 1rem; } } - 变量本身不能驱动媒体查询匹配，它只是静态覆盖；想响应横竖屏切换、深色模式等动态状态，得用
window.matchMedia() - 所有变量必须有初始定义（通常在
:root），否则未命中任何@media时，var(--x)会回退到initial，导致样式异常
真正容易被忽略的是：媒体查询是静态的，它不监听 window.innerWidth 变化，也不响应用户缩放行为；所谓“适配”，本质是一组预设条件的快照匹配。临界值怎么定、单位怎么选、是否要加 screen，每一个细节都在影响最终是否真能在 iPhone、iPad 或 Electron 窗口中跑通。
