sass - sass px to em mixin / 响应式站点上不同基本尺寸的函数

Question

我使用 sass 已经有一段时间了，多年来我一直在使用以下 px to em 函数进行媒体查询：

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

但是，我现在想根据屏幕宽度设置不同的基本字体大小。所以例如对于移动尺寸

$browser-context: 14; // Default

对于更大的屏幕：

$browser-context: 16; // Default

但我不知道如何用 sass 把这一切包起来。有任何想法吗？

谢谢，

score 0 · Accepted Answer

这是我的混音：

@function em($px, $base: 16px) {
  @return ($px / $base) * 1em;
}

像字体大小一样使用它：em(24px);。我认为这比只输入值更清楚

score 0 · Accepted Answer

我很确定如果不跳出框框思考，这在 SASS 中是无法实现的。

如您所知，SASS 会在发送到浏览器之前进行编译，因此，那时我们不知道什么浏览器，更不用说屏幕尺寸了。因此，媒体查询已被淘汰。

你能做的（我在这里理论）是：

设置您的 em 函数以生成一系列特定于不同浏览器宽度的字体大小，例如

@function em780($pixels, $context: $browser-context) {
   @return #{$pixels/$context}em
}

和

@function em420($pixels, $context: $browser-context) {
   @return #{$pixels/$context}em
}

等等

这应该为每个特定的屏幕宽度生成正确的 em 大小。然后，在普通媒体查询中分配这些 em 大小

@media all and (max-width: 420px){
    h1{ font-size: $em420;
}

@media all and (max-width: 780px){
    h1{ font-size: $em780;
}

这有任何意义吗？

显然，不要复制我在这里写的“代码”，但希望总体思路是有效的。

2 回答 2