当基于REM作为PX

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的浏览器。您需要检查根元素以验证其有效字体大小。