box-sizing: border-box 是响应式布局的起点，它确保 width/height 包含 padding 和 border，避免因浏览器盒模型差异导致容器溢出、栅格错位；reseter.css 通过 :where(:root) { box-sizing: border-box; } 和 ::before, ::after 全面覆盖，而老式 reset.css 易漏 svg 等元素。
box-sizing: border-box 是响应式布局的起点
不统一盒模型，width: 100% 在不同浏览器里可能包含或不包含 padding/border，导致容器撑出父级、栅格错位。modern-css-reset 和 reseter.css 都强制 box-sizing: border-box，但关键在作用范围：reseter.css 用 :where(:root) { box-sizing: border-box; } 确保根元素继承，再通过 *::before, *::after 扩展到伪元素；而老式 reset.css 仅靠通配符可能漏掉 SVG 内嵌元素。
容易踩的坑：
– 直接写 * { box-sizing: border-box; } 会覆盖 iframe、canvas 等原生行为，部分移动端 WebView 渲染异常
– 没配合 font-size 基准重置，rem/vw 布局在 iOS Safari 下仍可能因默认字号浮动而偏移
图片和媒体元素的 max-width 不是可选项
响应式中图片溢出容器是最常见“一眼可见”的兼容问题。minireset.css 显式设置 img, video, audio, canvas, svg { max-width: 100%; height: auto; }，但注意：SVG 内联时若含 viewBox，max-width 生效，但若设了固定 width 属性，部分旧版 Android 浏览器会忽略该规则。
实操建议：
– 对 <svg></svg> 标签额外加 display: block，避免行内换行间隙影响高度计算
– iframe 不在默认重置范围内，需手动补 iframe { width: 100%; min-height: 200px; }，否则嵌入视频/地图在小屏上横向滚动
all: unset + display: revert 的现代组合不可盲目套用
The New CSS Reset 的 all: unset 看似彻底，但它会清空 color、font-family 等继承属性，导致按钮文字变黑、链接失去下划线——这些不是 bug，是设计使然。它只适用于「完全自控样式链」的项目，比如 Web Components 或微前端子应用。
使用场景判断：
– 企业官网或 CMS 页面：慎用，revert 在 Safari 15.4 以下不支持，降级后整个页面文字无色
– LitElement / Stencil 组件库：推荐，组件封装了样式作用域，all: unset 反而减少外部样式污染
– 与 Tailwind 混用时：必须禁用其 preflight，否则两套重置叠加造成 margin 被清两次
字体继承和 line-height 重置直接影响阅读流
响应式不只是尺寸适配，更是阅读节奏控制。reseter.css 设置 :where(:root) { line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ... }，这个 line-height 值被所有块级元素继承，但 h1~h6 若没单独重置，Safari 会按默认 margin + 未缩放 line-height 渲染，造成标题行距过紧。
参数差异提醒：
– line-height: 1.5 是无单位值，安全；写成 line-height: 24px 会导致子元素无法继承缩放
– 字体栈末尾必须保留 sans-serif，否则某些 Linux 环境下中文 fallback 失败
– 表单控件（input, select）需显式继承 font，否则 Android Chrome 默认用系统等宽字体，输入框文字挤在一起
真正难的是平衡：重得太多，第三方组件（如地图 SDK、支付弹窗）样式崩解；重得太少，iOS 和 Android WebView 的 margin-top 差异又会在折叠屏上暴露无遗。选哪个 reset，本质是在可控性、兼容性和维护成本之间划一条动态线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
