全局重置盒模型的底线是*, *::before, *::after { box-sizing: border-box; }，否则伪元素仍为content-box，导致padding和border撑大元素，移动端缩放时布局错位。
用 *::before, *::after 统一盒模型是底线
不加这句，padding 和 border 会撑大元素宽高，PC端看着正常，移动端一缩放就错位。所有现代重置都从这里起步：
*, *::before, *::after {<br> box-sizing: border-box;<br>}别写成 content-box——那是旧式 reset 的遗留坑，现在连 IE11 都支持 border-box，强行用 content-box 只会让 width: 100% 在 flex 容器里失效。
移动端必须禁用 -webkit-text-size-adjust
iOS Safari 默认会放大小于 16px 的文本，导致整个布局被撑开、按钮错位、表单输入框变形。PC端不需要这条，但 SCSS 里不能只写在 @media 里——它得全局生效：
html {<br> -webkit-text-size-adjust: 100%;<br> /* 不要用 none，会禁用用户手动缩放 */<br>}注意：如果项目用了 rem 布局（比如 font-size: 62.5%），这条更要加，否则 iPhone 上文字忽大忽小，调试时根本没法看真实尺寸。
PC和移动端的 font-size 要分开设
PC 端默认用 16px 清晰，移动端用 14px 或 12px 更省空间，但不能靠媒体查询“覆盖”——那样容易漏掉未声明的元素。正确做法是在 body 上用 min-width 媒体查询分层定义：
body {<br> font-size: 14px;<br>}<br>@media (min-width: 768px) {<br> body {<br> font-size: 16px;<br> }<br>}别用 max-width 做反向判断，断点一旦多几个设备（比如加个 iPad Pro），维护成本指数级上升。768px 是平板起始线，够覆盖绝大多数非手机场景。
ul, ol, li 重置后仍要防伪列表项
很多团队重置了 list-style: none，却忘了 li 默认有上下 margin，在 Flex/Grid 布局里会导致意外空白。更隐蔽的问题是：某些富文本编辑器输出的 HTML 会嵌套 ul > li > ul > li，而重置没递归处理，子列表仍带缩进。
实操建议：
- 统一用
margin: 0干掉所有ul, ol, li的外边距 - 需要列表符号时，显式加
list-style: disc或用伪元素::marker - 在 SCSS 中封装成
@mixin reset-list，避免不同组件重复写
立即学习“前端免费学习笔记（深入）”；
