我正在使用 underscores starter theme用于 wordpress。
他们有这个mixin我不知道它要做什么。
// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
font-size: ($sizeValue * 16) * 1px;
font-size: $sizeValue * 1rem;
}
有人可以解释这背后的数学原理吗?
如果我的字体大小以 px 为单位,我该如何使用它?
最佳答案
它只是以 rem
输出您的字体大小,并带有像素回退('16' 是这里的基本字体大小)。
如果你使用@include font-size(1.2)
,它会输出:
font-size: 19.2px; // fallback for those with no rem support
font-size: 1.2rem;
此 mixin 不适合将以像素为单位的字体大小转换为 rem。
如果您想以像素为单位编写代码并将它们转换为 rem,则混合应如下所示:
@mixin font-size-px-to-rem($value: 12) {
font-size: $value * 1px;
font-size: $value / 16 * 1rem;
}
然后使用它:
.test {
@include font-size-px-to-rem(14);
}
输出到:
.test {
font-size: 14px;
font-size: 0.875rem;
}
关于css - 下划线字体大小混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35151624/