2

我将我的 RWD 断点设置为 SASS 中的变量，例如$bp-medium: 48em;（当 1em = 16px 时相当于 768px）。我还希望能够设置一个比该值小 1px 的变量，并将该变量的值设置为 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 基本尺寸。

这可以做到吗？

4

1 回答 1

1

你不能。使用不兼容的单位（如 em 和 px）执行算术运算的唯一方法是通过calc()CSS（不是 Sass），而在媒体查询中是不允许的。

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

// 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;
    }
}
于 2015-08-01T16:09:05.410 回答