应优先使用min-width，因其符合移动优先渐进增强逻辑：默认小屏样式，大屏逐级叠加；避免max-width因无下限导致的覆盖混乱、边界遗漏（如767.5px）及维护困难。
media query 里该用 min-width 还是 max-width
直接用 @media (min-width: 768px)，别写 @media (max-width: 767px)。前者是移动优先的自然层叠逻辑：默认样式适配小屏，大屏才叠加定位规则；后者容易漏掉边界（比如 767.5px 视口），也难维护——你得反复覆盖上一层的 top、right，一不留神就继承错。
常见错误现象：在 iPad 竖屏（视口宽 768px）下，@media (max-width: 768px) 和 @media (min-width: 768px) 同时命中，导致定位值冲突、元素偏移异常。
- 断点值统一用整数
px，如768px、1200px，避免小数或rem引发计算误差 - 只写变化的属性，比如桌面端加了
position: absolute和top: 20px，移动端就默认用position: static+ 文档流布局，不用显式写top: auto - 别混用
width和device-width：写@media (min-width: 768px)检测的是当前视口宽度，旋转屏幕会实时响应；而min-device-width是固定值，横竖屏切换后样式不更新
absolute/fixed 元素怎么响应式重设偏移
定位本身不响应，top、right 这些值不会随缩放自动变。所谓“响应式定位”，就是用 media query 手动重设它们。
典型场景：导航按钮在桌面右上角用 position: absolute，手机端要挪到左上角、并缩小尺寸。
立即学习“前端免费学习笔记（深入）”；
- 先写移动端默认样式（无定位、流式布局），再在
@media (min-width: 768px)里加桌面专属定位 - 偏移单位优先选
rem或%，但注意：%依赖父容器宽高，若父级没设height，top: 10%可能无效 - iOS Safari 对
position: fixed滚动支持不稳定，小屏慎用；可改用position: sticky或 JS 补偿 - 内容高度动态时（比如文字行数不定），单靠调
top容易抖动，加transform: translateY(-50%)微调更稳妥
示例：
.nav-toggle {
position: static;
margin: 16px;
}
@media (min-width: 768px) {
.nav-toggle {
position: absolute;
top: 1.2rem;
right: 1.2rem;
transform: scale(1.1);
}
}
relative 定位能不能当响应式基础用
不能。position: relative 只是给子元素提供定位上下文，它自己仍占文档流，且偏移值（top、left）一样不会自动适配视口变化。
常见误操作：给容器设 position: relative，以为子元素的 absolute 就能“跟着响应”——其实子元素的定位起点还是这个容器的原始位置，容器本身没做任何响应式调整，结果小屏上整个模块溢出或遮挡。
- 如果要用 relative 做布局基座，必须配合 media query 重设它的
padding、max-width或height，否则没意义 - 更推荐用
flexbox或grid替代硬编码定位，它们天生支持流式收缩/拉伸，减少 media query 覆盖量 - 某些场景非用定位不可（如气泡提示、下拉菜单），那就老老实实每个断点都检查
top/left是否还合理，别指望 relative 自动兜底
三端（手机/平板/桌面）断点怎么设才不打架
按设备主流视口宽度分三级，用 min-width 升序写，不重叠、不遗漏：
- 手机：默认样式，不写 media query（
0–767px） - 平板：用
@media (min-width: 768px)（覆盖 iPad 竖屏、安卓平板等） - 桌面：用
@media (min-width: 1200px)（避开部分大屏手机的 1080px 视口干扰）
关键细节：平板断点别卡死在 768px，有些 Android 平板横屏视口达 1280px，若只写一个断点，可能把平板横屏当成桌面处理。必要时加 and (orientation: landscape) 细化，比如：
@media (min-width: 768px) and (orientation: landscape) {
.sidebar { width: 240px; }
}
复杂点在于，绝对定位元素一旦内容长度变化（比如多语言文案）、或字体缩放开启，原有偏移就会失效——这没法靠 media query 自动修复，得靠设计阶段预留足够余量，或用 JS 监听 resize 动态微调。
