rem适配方案核心是用媒体查询区间覆盖替代像素穷举，以750px设计稿为基准按15等份（即font-size=50px）反推各断点字号，配合less变量与.px2rem mixin实现安全px转rem，并通过兜底默认值、&:hover正确嵌套及viewport重置保障兼容性。
直接用 @media + html font-size + Less 变量/运算 就能写出真正可维护的 rem 方案，不需要引入 JS 库或复杂计算逻辑。
怎么写 html font-size 的媒体查询规则才不漏设备
别按具体像素值穷举所有设备宽度（比如 @media (width: 375px)），这种写法漏屏率高、维护成本爆炸。应该用区间覆盖，且以主流设计稿宽度（750px）为基准，按「等分份数」反推根字号。
- 统一按 15 等份划分：750px ÷ 15 = 50px → 即
html font-size: 50px对应 750px 屏幕 - 其他宽度按比例缩放：
font-size = (屏幕宽度 / 750) * 50，用@media写成区间更稳 - 关键断点选 320px、360px、375px、414px、720px、750px，覆盖 iOS/Android 主流机型
- 必须加兜底：在所有
@media外层先写默认值，比如html { font-size: 50px; }，否则 PC 端打开会崩
Less 里怎么安全地把 px 换算成 rem
手动除法容易错，也难改。用 Less 变量 + 运算才是正解，但要注意单位处理和精度问题。
- 定义基准变量：
@base-width: 750;、@base-font: 50; - 写一个换算函数（mixin）：
.px2rem(@px) { width: unit(@px / @base-font, rem); } - 调用时直接传设计稿原始 px 值：
.header { .px2rem(88); }→ 编译后是width: 1.76rem; - 注意：
@px必须是纯数字（不能带px单位），否则除法会报错Operation on an invalid type - 如果涉及小数精度问题（如 1.333333rem），可用
round()控制位数：round(@px / @base-font, 3)
为什么嵌套里写 &:hover 而不是 :hover
Less 嵌套默认是后代选择器，不加 & 会导致生成错误的选择器路径，尤其在组件化开发中极易引发样式污染或失效。
- 错误写法：
.btn { color: red; :hover { color: blue; } }→ 编译成.btn :hover（空格存在，匹配的是 .btn 内部任意 hover 元素） - 正确写法：
.btn { color: red; &:hover { color: blue; } }→ 编译成.btn:hover - 交集选择器同理：
&.active、&::before、&[disabled]都必须带& - 伪类/伪元素/属性选择器只要不是单纯后代关系，前面就得加
&
实际项目里最容易被忽略的三个点
很多团队写了半年 rem，上线后才发现按钮在 iPhone SE 上小得点不着，或者横屏时布局错乱——问题往往出在这些细节上。
-
body或容器没设min-width，导致小屏下内容被压缩变形；建议加min-width: 320px;并配合width: 15rem;（750px/50） - 字体大小没用
rem统一控制，混用px或em会破坏缩放一致性 - 忘了重置
viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">缺失会导致@media判断失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
