如何通过SCSS变量实现全局字号缩放_REM单位与SCSS计算-css教程-PHP中文网

正确做法是将rem基准值定义为无单位scss变量（如$font-scale: 16），在:root中转为px，并用rem-calc()函数统一计算rem值，避免硬编码和js动态设置冲突。

如何通过scss变量实现全局字号缩放_rem单位与scss计算

SCSS里用`$font-scale`统一控制REM基准值

REM缩放本质是改根元素font-size，但直接在:root里写死数值会导致后续所有rem值被锁定。正确做法是把根字号设为一个SCSS变量，并让所有rem计算基于它——这样只需改一处变量，全局字号就等比缩放。

常见错误是把$font-scale定义成像素值（如$font-scale: 16px），这会让1rem永远等于16px，失去缩放能力。应该定义为无单位数字（如$font-scale: 16），再在:root中显式转成px：

$font-scale: 16;
<p>:root {
font-size: #{$font-scale}px;
}</p>

之后所有rem值都用#{$font-scale} * X方式生成，比如1.5rem对应(1.5 * $font-scale) + px，而不是硬写24px。

用`rem-calc()`函数自动转像素为REM

手算14px / 16 = 0.875rem容易出错，尤其当$font-scale后期改成14或18时，所有手动写的rem值都会失效。必须封装计算逻辑。

推荐定义一个SCSS函数，输入像素值，返回对应REM字符串：

@function rem-calc($px, $base: $font-scale) {
  @return ($px / $base) * 1rem;
}

使用时：font-size: rem-calc(20); → 输出1.25rem（假设$font-scale: 16）；margin: rem-calc(8) rem-calc(16);也完全可行。

第二个参数$base支持局部覆盖，比如适配高DPI屏时可传rem-calc(20, 32)
函数返回带单位的值，不能用于数学运算（如rem-calc(16) * 2会报错），需先提取数值再乘
别用calc() CSS函数替代——那是运行时计算，无法参与SCSS编译期缩放

媒体查询里动态切换`$font-scale`要避开编译陷阱

想在@media (min-width: 768px)里把字号放大1.25倍？不能直接在媒体查询里重定义$font-scale——SCSS变量作用域是块级的，且编译时已固化，媒体查询内改变量对已生成的CSS无效。

CSS婚礼策划服务机构宣传网站模板

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

下载

正确思路是：提前定义多套$font-scale，用@if生成不同断点下的:root样式：

$font-scale-mobile: 14;
$font-scale-tablet: 16;
$font-scale-desktop: 18;
<p>:root {
font-size: #{$font-scale-mobile}px;
}</p><p>@media (min-width: 768px) {
:root {
font-size: #{$font-scale-tablet}px;
}
}</p><p>@media (min-width: 1024px) {
:root {
font-size: #{$font-scale-desktop}px;
}
}</p>

关键点：