在CSS / SASS中计算em值-1px，而不假设用户的默认字体大小 [英] Calculating an em value -1px in CSS/SASS without assuming the user's default font size

问题描述

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

I am setting my RWD breakpoints as variables in SASS, e.g. $bp-medium: 48em; (equivalent to 768px when 1em = 16px). I would also like to be able to set a variable that is 1px less than that, and have that variable's value be set in ems so that the breakpoint continues to respect the user's base size preferences.

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

SASS provides calculation tools, certainly, but every way I've tried relies on me having to make an assumption regarding how many pixels the user has their browser's default font size set to. For example:

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

...给出$ bp-medium-1的值为767px（最糟糕的结果是in px）或

…gives $bp-medium-1 a value of 767px (worst of all options as the result is in px), or

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

...这给出$ bp-medium-1的值为47.9375em-更好，因为至少结果是现在的ems，但我不得不使用假设'16'在计算中。

…which gives $bp-medium-1 a value of 47.9375em — better, since at least the result is in ems now, but I've had to use that assumed '16' in the calculation again.

重新概述：我想工作出来 48em - 1px ，最终结果是ems和，而不需要假设一个16px / em的基本大小。

To recap then: I want to work out 48em - 1px, with the end result being in ems and without having to assume a 16px/em base size.

可以这样做吗？

推荐答案

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

No, you cannot. The only way you can perform arithmetic operations with incompatible units like em and px is via calc() in CSS (not Sass), and that is not allowed in media queries.

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

You can use the largest possible decimal (based on your precision settings) that is smaller than a specific value.

// 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，而不假设用户的默认字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！