核心是用变量控制+动态基准实现px到rem自动换算：设@base-font-size与JS设置的html font-size一致，通过.px2rem()或.to-rem()函数封装换算逻辑，避免媒体查询硬编码和单位误用。
直接用 Less 写 rem 响应式，核心不是“怎么写语法”，而是“怎么让 px 到 rem 的换算不手动、不翻车、不随屏幕尺寸改来改去”。关键在变量控制 + 动态基准 + 避开媒体查询硬编码。
用 @base-font-size 统一控制根字号基准
所有 rem 值都依赖 html 的 font-size，但这个值不能写死（比如 font-size: 100px），也不能靠一堆 @media 手动切。实际项目里更可靠的方式是：用 JS 动态设置 html 的 font-size（如 flexible.js 或自写逻辑），然后在 Less 里把换算逻辑收口到一个变量。
示例：
@base-font-size: 100; // 表示 1rem = 100px（对应 JS 设置的 html font-size）
@design-width: 750; // 设计稿宽度（px）
<p>// px → rem 辅助函数
.px2rem(@px) {
@rem: unit(@px / @base-font-size, rem);
}</p><p>.container {
width: .px2rem(750); // → 7.5rem
padding: .px2rem(30) .px2rem(20);
}
-
@base-font-size必须和运行时 JS 设置的html font-size严格一致，否则换算全错 - 不要用
@base-font-size: 16这类“默认值”——它只在未被 JS 覆盖时生效，而移动端几乎总会覆盖 - 如果 JS 是按设备宽度等比缩放（如
document.documentElement.style.fontSize = docWidth / 750 * 100 + 'px'），那这里就填100
避免在 Less 里写大量 @media 切屏宽
很多人一想到响应式就立刻写 @media (max-width: 375px)，但在 rem 场景下，这是低效且易维护错的路径。因为 rem 本身是弹性单位，只要 html font-size 动态对了，1rem 对应的物理像素自然变，无需为每个断点重写样式。
立即学习“前端免费学习笔记（深入）”；
- 真需要媒体查询的场景只有：布局结构变化（如 flex 换 direction）、隐藏/显示模块、字体临界缩放（如小屏下字号不能低于 12px）
- 别用
@media (width: 375px)—— 这个语法不兼容多数浏览器，正确写法是@media (max-width: 375px)或@media screen and (max-width: 375px) - 如果必须切字号，优先用
min-font-size+clamp()（现代方案），而不是堆@media
用 Less 变量 + 运算简化设计稿还原
设计师给的是 750px 宽稿，你写的 px 值要转成 rem，但每次除以 @base-font-size 太累。用变量封装换算逻辑，比手算或靠 IDE 插件更可控。
示例（适配常见设计稿宽度）：
@design-width: 750;
@base-font-size: 100;
<p>// 自动按设计稿比例换算
.to-rem(@px) {
@r: unit(@px / @design-width * @base-font-size, rem);
}</p><p>.btn {
font-size: .to-rem(32); // 设计稿 32px → 实际 rem 值随屏幕缩放
padding: .to-rem(20) .to-rem(40);
}
-
.to-rem()比.px2rem()更贴近设计协作流：它隐含“所有值按设计稿等比缩放”的前提 - 乘除运算中单位必须空格隔开，
@px/@base-font-size写成@px / @base-font-size，否则 Less 编译报错 - 如果设计稿是 375px（如 Figma 默认），把
@design-width改成375即可，其余代码不动
注意 rem 在字体、边框、阴影上的表现差异
rem 对字体大小、宽高、内边距很友好，但对 border、box-shadow、border-radius 等属性，缩得太小会导致视觉断裂（比如 1px 边框在大屏上变成 0.5px，渲染模糊或消失）。
- 边框建议用
px固定，或用transform: scaleY(0.5)模拟 1px，别强上rem - 阴影偏移和模糊值慎用
rem，小屏下容易过虚，建议统一用px或em（相对父字体） -
line-height用无单位数值（如1.5）最安全，它不依赖rem基准，只跟当前字体大小有关
真正难的不是写多少行 Less，而是确认 JS 设置的 html font-size 是否稳定、是否被其他脚本覆盖、是否在页面生命周期早期执行——这些地方一出问题，整个 rem 体系就静默失效，还很难 debug。
