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。有什么想法吗？

谢谢，

Answer 1

我很确定，如果不在框外思考，这在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;
}

这有意义吗？

显然，不要复制我在这里写的'代码'，但希望一般的想法是有效的。

Answer 2

这是我的混音：

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

像font-size：em（24px）;一样使用它。我认为只需键入值

就更清楚了