怎样利用SCSS编写同时适配PC和移动端的全局CSS重置表-css教程-PHP中文网

全局重置盒模型的底线是*, *::before, *::after { box-sizing: border-box; }，否则伪元素仍为content-box，导致padding和border撑大元素，移动端缩放时布局错位。

怎样利用scss编写同时适配pc和移动端的全局css重置表

不加这句，padding 和 border 会撑大元素宽高，PC端看着正常，移动端一缩放就错位。所有现代重置都从这里起步：

*, *::before, *::after {<br>  box-sizing: border-box;<br>}

别写成 content-box——那是旧式 reset 的遗留坑，现在连 IE11 都支持 border-box，强行用 content-box 只会让 width: 100% 在 flex 容器里失效。

iOS Safari 默认会放大小于 16px 的文本，导致整个布局被撑开、按钮错位、表单输入框变形。PC端不需要这条，但 SCSS 里不能只写在 @media 里——它得全局生效：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

html {<br>  -webkit-text-size-adjust: 100%;<br>  /* 不要用 none，会禁用用户手动缩放 */<br>}

注意：如果项目用了 rem 布局（比如 font-size: 62.5%），这条更要加，否则 iPhone 上文字忽大忽小，调试时根本没法看真实尺寸。

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 是平板起始线，够覆盖绝大多数非手机场景。

很多团队重置了 list-style: none，却忘了 li 默认有上下 margin，在 Flex/Grid 布局里会导致意外空白。更隐蔽的问题是：某些富文本编辑器输出的 HTML 会嵌套 ul > li > ul > li，而重置没递归处理，子列表仍带缩进。
实操建议：

不然某天产品说“这个弹窗里的文案列表要加圆点”，你得翻三四个文件找哪漏了重置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

怎样利用SCSS编写同时适配PC和移动端的全局CSS重置表