必须加viewport meta标签，否则@media在手机上完全不生效；推荐统一用min-width或max-width断点，避免临界值冲突；断点值基于设计稿逻辑像素，配合rem布局时需在每个断点内重设html font-size。
必须加 viewport meta 标签，否则@media在手机上完全不生效
几乎所有@media失效问题都卡在这一步。浏览器默认按 980px 宽度渲染移动端页面，max-width: 768px永远不匹配。
在 <head> 中必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉 width=device-width → 视口固定为桌面宽度；漏掉 initial-scale=1.0 → 页面可能缩放，导致视口宽度计算偏移。微信 WebView、iOS Safari、安卓 Chrome 全部依赖这个声明才开始识别媒体查询。
@media (min-width: Npx) 和 (max-width: Npx) 别混着用同一套断点
混用会引发 1px 边界冲突或样式覆盖不可控。比如：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px)匹配 ≤768px -
@media (min-width: 768px)也匹配 768px
在 768px 这个临界值上，两个规则都成立，后写的 CSS 会覆盖前写的——但你无法保证所有构建工具、CSS 合并顺序、@import 加载时机都一致。
推荐统一风格：
- 移动优先：全用
min-width，基础样式写小屏，逐步增强 - 老项目改造：全用
max-width，基础样式写桌面，逐步降级 - 断点值之间留 1px 间隙，例如
max-width: 375px和min-width: 376px
别用 max-height 做断点，它在移动端根本不可靠
视口高度受浏览器地址栏、底部操作栏动态遮挡影响极大。iPhone Safari 滚动时隐藏地址栏，window.innerHeight 突然变大，@media (max-height: 667px) 可能瞬间失效或误触发。
真正稳定的是宽度：
- 设备物理宽度固定（如 iPhone 14 是 430px），但 CSS 中应使用逻辑像素（
device-width≠width） - 设计稿按宽度切图（375px / 750px），媒体查询天然对齐工作流
- 横屏时用
orientation: landscape单独处理，而不是靠 height 断点“猜”方向
实际断点建议只用 3–4 个：320px、375px、414px、768px，覆盖 95% 主流机型。
配合 rem 布局时，媒体查询要直接改 html font-size
很多人把媒体查询写成独立样式块，结果 html { font-size: 16px } 被后面规则覆盖，rem 计算基准错乱。
正确做法是：在每个断点内，第一件事就是重设根字号：
@media screen and (min-width: 375px) {
html { font-size: 18.75px; } /* 375 / 20 = 18.75 */
}
@media screen and (min-width: 414px) {
html { font-size: 20.7px; } /* 414 / 20 ≈ 20.7 */
}注意：font-size 值不是整数更稳妥，避免四舍五入误差累积；不要用 JS 动态设置，CSS 媒体查询触发更快、更早、无 FOUC。
最常被忽略的点：媒体查询匹配的是当前视口 width，不是 device-width；断点值应基于设计稿逻辑像素，而非设备物理像素除以 DPR；orientation 必须和宽度断点正交使用，不能替代宽度判断。
