viewport标签写错会导致@media完全失效，正确写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">；断点应基于内容变化而非设备尺寸，推荐3–4个min-width递进断点，并用grid/flex配合媒体查询实现弹性布局。
viewport 标签写错，@media 就完全不生效
几乎所有“写了 @media 但手机上还是缩成一团”的问题，根源都在 <meta name="viewport">。它不是可选配置，而是响应式布局的启动开关。
必须且唯一正确的写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">。其他写法全是坑：
-
width=375或width=1200：硬编码让视口固定，失去响应能力 -
user-scalable=no或maximum-scale=1.0：禁用缩放，违反可访问性，iOS Safari 下还可能触发字体渲染异常 - 被构建工具（如 Vite 插件）覆盖：最终 HTML 的
<head>里看不到这行，或内容被篡改
验证方式很简单：Chrome DevTools 切 iPhone 模拟器后，看 <html> 的 clientWidth 是否接近设备逻辑像素（比如 iPhone 13 是 390）。如果不是，说明 viewport 没起作用。
断点不是设备尺寸快照，而是内容撑开/挤下的临界点
抄 Bootstrap 的 768px、992px 很容易翻车——iPad Pro 竖屏是 1024px，横屏却只有 768px；安卓小屏手机可能只有 360px 宽，但文字照样要可读。真正该盯的，是设计稿里那个“看着不对劲”的瞬间。
立即学习“前端免费学习笔记（深入）”；
操作步骤很直接：
- 打开 Chrome DevTools 响应式模式，拖动宽度滑块，眼睛盯着卡片换行、文字断行、图片裁切、导航栏折叠的那一刻
- 记下那个像素值，比如
623px、892px，再向上取整为640px、900px这类易维护的整数 - 别为每个 iPhone 型号设断点（如
390px、430px），这些应由flex/grid+ 相对单位消化
3–4 个全局断点足够：推荐 480px（窄屏极限）、768px（内容开始舒展）、1024px（小桌面）、1200px（宽屏）。再多，说明布局本身弹性不足。
用 min-width 递进，别混用 max-width 和 min-width
写 @media (max-width: 767px) 和 @media (min-width: 768px) 并列，看似无缝，实则在 767.5px（比如缩放 110% 的 iPad）下两者都不命中——这是最隐蔽的兼容性坑。
移动优先 + min-width 才是稳定写法：
- 基础样式（小屏）直接写在
@media外，不包任何条件 - 后续只用
@media (min-width: 768px)、@media (min-width: 1024px)逐级增强 - 避免嵌套混乱、覆盖难查，调试时逻辑线性清晰
max-width 只用于极少数场景：比如只想临时隐藏某块小屏专属内容，或需要覆盖已有 min-width 规则时（注意层叠顺序）。
网格布局和媒体查询不是并列关系，而是协同关系
grid 或 flex 不是替代 @media 的方案，而是让 @media 更轻量。关键在于：不要在每个断点里重写整套布局，只改必要属性。
比如用 grid-template-columns 控制列数，配合 minmax() 和 auto-fit：
/* 默认单列 */
.container {
display: grid;
grid-template-columns: 1fr;
}
<p>@media (min-width: 768px) {
.container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}这种写法比在 768px、1024px、1200px 各写一遍 repeat(2, 1fr)、repeat(3, 1fr)、repeat(4, 1fr) 更健壮——它能适应 800px、850px、1100px 等所有中间宽度，而不会卡在断点缝隙里。
真正卡住人的，永远是那个“内容刚好看着不对劲”的瞬间。这个点，设计稿不会标，设备参数表里也查不到，只能自己拖着窗口一像素一像素地试。
