必须在媒体查询前统一默认样式，否则盒模型差异会被flex/grid/响应式放大导致错位溢出；normalize.css需置于最前，button和textarea等须单独重置box-sizing与vertical-align。
直接结论：不用“响应式开发中处理默认样式差异”这种说法——默认样式差异和响应式无关，是所有 CSS 开发的前置问题；必须在 media query 之前就收口，否则 breakpoint 里调样式只会越调越乱。
为什么不能等写完响应式再统一默认样式
默认样式差异（比如 input 在 Safari 和 Chrome 里高度差 2px、button 的 line-height 解析逻辑不同）会直接影响盒模型尺寸计算。一旦你用 flex 或 grid 布局 + rem 间距 + 媒体查询缩放字体，这些微小差异就会被放大成错位、换行、溢出。更麻烦的是，某些差异只在特定 viewport 下暴露（例如 iOS Safari 在横屏时对 textarea 的 resize 行为会触发重排），你以为是媒体查询写错了，其实是基础盒模型没归零。
- normalize.css 必须放在所有自定义 CSS 的最前面，顺序错等于没引
- 通配符
* { box-sizing: border-box; }对button在 Safari 15+ 和部分 Android WebView 无效，必须补button { box-sizing: border-box; } - 不要在
@media里覆盖默认样式——比如给input加padding，结果只在桌面生效，移动端反而因 UA 样式叠加导致内边距翻倍
表单控件在 flex 容器中对不齐的真正原因
不是 flex 属性写得不对，是 input、select、button 的 baseline 对齐基准不一致。Chrome 把 input[type="text"] 当作 inline 元素按文字底部对齐，Safari 可能把 select 当系统控件按容器底边对齐，Firefox 又可能按 line-height 中心算——三者并排时，哪怕都设了 height: 36px，视觉上也必然错位。
- 统一用
align-items: center;+display: flex;包裹控件组，别依赖 inline-level 对齐 -
textarea默认vertical-align: top;，但 Safari 下可能无视，显式写vertical-align: middle;也不保险，建议外层 flex 包裹 - 旧版 Edge 和 Safari 的
select不响应padding-top，得靠line-height微调，例如line-height: 36px;配合height: 36px;
sanitize.css forms.css 适合什么场景
当你项目已有大量高特异性规则（比如 .form-group input[type="text"]），再引入 normalize.css 容易被覆盖失效；这时 sanitize.css forms.css 的 :where() 包裹方案更安全——它把所有表单相关重置样式特异性压到最低，确保能穿透既有规则生效。
- 它不替换
normalize.css，而是补充：normalize 收敛默认态，sanitize forms 负责低侵入覆盖 - 注意发布时间是 2026 年 8 月 17 日，需确认你用的版本包含该模块（npm 包名仍是
sanitize.css，但需导入子路径） - 它不处理伪类（如
:focus）、不兼容 IE11 及更早——如果你要支持这些，得额外补button:focus { outline: none; }类规则
最容易被忽略的一点：所有重置动作必须发生在 CSS 构建流程最前端，且不能被 postcss autoprefixer 或其他插件误删（比如某些配置会过滤掉 :where()）。一旦漏掉 button { box-sizing: border-box; } 或 textarea { resize: vertical; }，后续所有响应式调整都是在沙上筑塔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
