css - 基于 PX 的 REM 计算容器宽度不正确

Question

我有以下卡片:

.card {
    margin: $v/2 $h/2;
    width: $card-width;
}

我想在一个容器中放入 3 张卡片，所以我计算容器宽度:

$container-max-width: ($card-width + $font-size-base) * 3;

当使用 PX 定义 $v 和 $h 时，这工作正常:

$card-width: 340px;
$font-size-base: 15px;

// This is working
$v: $font-size-base;
$h: $font-size-base;

但是当使用 REM 定义它们时它不起作用

// This is not working
$v: 1rem;
$h: 1rem;

$container-max-width: ($card-width + $font-size-base) * 3;

安example pen can be found here .

我认为 rem = font-size 所以这两个计算应该是相同的，那么为什么使用 REM 的计算不起作用？

Answer 1

rem = 相对于根元素或 html 元素的字体大小。对于大多数定义为 16px 的浏览器。您需要检查根元素以验证其有效字体大小。