首页 文章

在CSS / SASS中计算em值-1px而不假设用户的默认字体大小

提问于
浏览 次
2

我将我的RWD断点设置为SASS中的变量，例如 $bp-medium: 48em; （当1em = 16px时相当于768px） . 我还希望能够设置一个比1px less 的变量，并具有该变量's value be set in ems so that the breakpoint continues to respect the user'的基本大小首选项 .

当然，SASS提供了计算工具，但我尝试过的每一种方式都依赖于我必须假设用户将浏览器的默认字体大小设置为多少像素 . 例如：

$bp-medium-1: ($bp-medium/1em)*16px-1px;

...给$ bp-medium-1一个767px的值（所有选项中最差的，因为结果是px），或者

$bp-medium-1: $bp-medium - (1em/16);

...给bp-medium-1一个47.9375em的值 - 更好，因为至少结果现在是ems，但我不得不再次使用假定的'16' .

回顾一下：我想找出 48em - 1px ，最终结果是在ems中，而不必假设16px / em基本大小 .

可以这样做吗？

css sass calc

1 回答

  • 1

    你不能 . 使用不兼容的单元（如em和px）执行算术运算的唯一方法是通过CSS（而不是Sass）中的 calc() 和that is not allowed in media queries .

    您可以使用小于特定值的最大可能小数（基于您的精度设置） .

    // default precision in Sass is 5 decimal places
// go any bigger and Sass will round up
@media (max-width: 34.99999em) {
    body {
        background: red;
    }
}

@media (min-width: 35em) {
    body {
        background: green;
    }
}
    回复于

相关问题