viewport标签必须写为<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则@media完全失效；断点应基于内容表现而非设备尺寸，推荐480px、768px、1024px、1200px四个min-width断点，并配合clamp()、max-width:100%等细节优化。
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（宽屏）。再多，说明布局本身弹性不足。
@media 优先用 min-width，别混用 max-width
用 min-width 是为了移动优先 + 渐进增强，逻辑更稳，也更容易维护：
- 基础样式默认给小屏写，所有设备都兜底；大屏才加覆盖规则，不会漏掉新设备
-
max-width容易留空隙：比如@media (max-width: 767px)和@media (min-width: 769px)中间缺了768px，这个宽度啥都不匹配 - 多个
min-width规则天然叠加，后面规则能覆盖前面的，不用反复!important或嵌套
特别注意折叠屏场景：同时写 @media (max-width: 899px) 和 @media (min-width: 900px)，看似无缝衔接，但当用户把浏览器缩放到 110%（此时视口宽度可能为 899.5px），两个媒体查询都不匹配，样式完全丢失——这正是很多折叠屏页面在展开一半时突然“空白”的原因。
图片、表单、字体这些元素总在断点后出问题，光调容器宽度不够
媒体查询只是“开关”，但表单控件和图片有自己顽固的默认行为，光调容器宽度根本不够：
-
input[type="text"]在 Chrome/Firefox 有隐式min-width: 120px，小屏下宁可溢出也不收缩 → 必须显式写min-width: 0 - 图片没配
max-width: 100%和height: auto，断点再准也会撑破容器 - 字体别靠多个断点反复改
font-size或padding—— 改用 CSS 自定义属性 +clamp()更简洁：font-size: clamp(1rem, 2.5vw, 1.25rem);
真正容易被忽略的是：断点值用 rem（如 @media (min-width: 39rem)）比像素更鲁棒，因为用户缩放字体时，断点会同步偏移；但前提是根字体没被 JS 强制重设，否则 rem 也会失准。
