在不假设用户默认字体大小的情况下计算 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时相当于768px)。我还希望能够设置一个 1px less 的变量,并将该变量的值设置为 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 的值——更好,因为至少结果现在以 em 为单位,但我不得不在计算中再次使用假设的“16”。
然后回顾一下:我想计算 48em - 1px
,最终结果以 em 为单位,并且 而 不必假设 16px/em 的基本大小。
这可以做到吗?
不,你不能。您可以使用不兼容的单位(如 em 和 px)执行算术运算的唯一方法是通过 calc()
in CSS(而不是 Sass)和 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;
}
}
我将我的 RWD 断点设置为 SASS 中的变量,例如$bp-medium: 48em;
(1em = 16px时相当于768px)。我还希望能够设置一个 1px less 的变量,并将该变量的值设置为 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 的值——更好,因为至少结果现在以 em 为单位,但我不得不在计算中再次使用假设的“16”。
然后回顾一下:我想计算 48em - 1px
,最终结果以 em 为单位,并且 而 不必假设 16px/em 的基本大小。
这可以做到吗?
不,你不能。您可以使用不兼容的单位(如 em 和 px)执行算术运算的唯一方法是通过 calc()
in CSS(而不是 Sass)和 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;
}
}