sass px到em混合/功能，用于响应站点上不同的基本尺寸

我使用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中是不可能实现的

正如您所知，SASS在发送到浏览器之前进行编译，因此，在这一点上，我们不知道什么浏览器，更不用说屏幕大小了。因此，媒体查询被取消

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

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

@function em780($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;
}

这有什么意义吗

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

这是我的混音：

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

像使用字体大小一样使用：em（24px）；。我认为这比仅仅键入值更清楚

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