Question

我将我的RWD断点设置为SASS中的变量，例如$bp-medium: 48em;（当1em = 16px时相当于768px）。我还希望能够设置一个比1xx 更少的变量，并在ems中设置该变量的值，以便断点继续尊重用户的基本大小首选项。

当然，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基本大小。

可以这样做吗？

Answer 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;
    }
}

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

1 个答案: