断点应基于内容变化临界点而非设备分辨率，如文字换行、卡片列数切换、导航折叠等；推荐3–4个min-width递进断点（如480px、768px、1024px、1200px），避免混用max-width与min-width导致边界遗漏。
media query 断点该按什么逻辑写？
别照着 iPhone、iPad、MacBook 的物理分辨率硬套。断点应该由内容撑开的临界宽度决定——比如一段文字换行、一个卡片从三列变成两列、导航栏折叠的瞬间。
常见但易错的做法是把 @media (max-width: 768px) 当作“手机断点”，结果在 769px 宽的安卓平板上样式错乱。真正该用的是内容驱动的断点，例如：
- 主容器最大宽度达到 1200px 时触发 PC 布局
- 侧边栏宽度缩到无法容纳图标文字时才折叠
- 字体大小缩到 14px 以下影响可读性时，改用
clamp()控制最小值
为什么用 rem + media query 还是会出问题？
因为 rem 依赖 html 的 font-size，而很多人直接写死 html { font-size: 16px; }，或只在媒体查询里粗暴重设，导致缩放、系统字体设置、DPR 变化时全部失效。
更稳的做法是让根字号本身响应式：
立即学习“前端免费学习笔记（深入）”；
html { font-size: clamp(14px, 2.5vw, 18px); }注意三点：
-
clamp()三个参数必须单位一致，不能混用px和em - 用
vw而不是%，否则页面缩放时计算基准错乱 - 不要用
vh控制字号，滚动时视口高度变化会让文字跳
image-set() 为什么背景图还是模糊？
image-set() 只看设备像素比（DPR），不看视口宽度。iPhone 竖屏（375px 宽 × 3x）和 MacBook（1440px 宽 × 2x）可能加载同一张 @2x 图，但前者需要小图、后者需要大图，强行拉伸就糊。
必须分层控制：
- 先用媒体查询按宽度选图：
@media (max-width: 767px) { .hero { background-image: url('hero-mob@2x.jpg'); } } - 再在每个断点内用
image-set()补高 DPR 场景：background-image: image-set(url('hero-mob@1x.jpg') 1x, url('hero-mob@2x.jpg') 2x); - 永远带 fallback：
background-image: url('fallback.jpg'), image-set(...); - Firefox 至今不支持
image-set()，没 fallback 就白写
vw/vh 单位在 PC 宽屏布局里怎么用才不翻车？
直接写 width: 100vw 很危险：滚动条占空间，实际可视宽度小于 100vw，元素会溢出；固定高度用 vh 在移动端 Safari 里会随地址栏显隐跳动。
安全用法：
- 全宽容器加
box-sizing: border-box，并预留滚动条宽度（calc(100vw - 17px)是粗略值，更准要用 JS 读document.documentElement.clientWidth） - 避免
height: 100vh做关键布局，改用min-height: 100vh或 Flex 填充 - 按钮、标题等关键尺寸慎用纯
vw，建议组合：font-size: clamp(16px, 4vw, 24px)
最常被忽略的点：所有基于视口的缩放方案，都默认用户不会禁用 CSS 或强制放大字体。真要兼容系统级缩放，clamp() 是目前唯一能跟上的原生方案，JS 动态改 font-size 会丢掉系统缩放感知。
