Html 如何根据媒体查询更改scss变量

我在一个基于

scss

的网页上工作，遇到了一个问题。我有以下

scss

功能将我的字体

px

单位转换为

rem

@function rem($size) {
 $remSize: $size / $base-size;
 @return #{$remSize}rem;
}

---

在上述功能中，

$base size

是静态的，它保持为

16

，但我想在针对移动设备时将

base size

更改为

12

，以减少整个项目中更改

字体大小的冗余。是否有任何方法可以使
$base size
动态，以便根据屏幕分辨率更改值。任何帮助都将不胜感激
 据我所知，这是不可能的。
$base size
变量填充一次，媒体查询在客户端进行

您可以尝试使用新的基本大小变量和值为每个媒体查询编写新函数

变量：

$base-size: 16px;
$base-size-small: 12x;

编辑：出于同样的原因，下面的函数不起作用

职能：

@function rem($size) {
 $remSize: $size / $base-size;
 @return #{$remSize}rem;
}

@media only screen and (max-width : 768px) {
  @function rem($size) {
   $remSize: $size / $base-size-small;
   @return #{$remSize}rem;
  }
}

这可能有很多解决方法，这取决于您可以处理的复杂程度

在不了解项目细节的情况下，这可能是一种解决方案-如果我正确理解您如何使用您的功能：

$base-size: 16px;

@function rem($size, $screen: desktop) {
    $remSize: null;

    @if ($screen == desktop) {
        $remSize: ($size / $base-size) * 16/16;
    }
    @if ($screen == mobile) {
        $remSize: ($size / $base-size) * 12/16;
    }
    @else {
        $remSize: $size / $base-size;
    }

    @return #{$remSize}rem;
}

.some-text {
    font-size: rem(24px); /* = 1.5rem */
}

@media (max-width: 480px) {
    .some-text {
        font-size: rem(24px, mobile); /* = 1.125rem */
    }
}

通过将
$screen
参数添加到
rem（）
函数，您可以在桌面和移动设备之间切换基本大小，而无需更改静态变量

此示例默认为
desktop
，并在媒体查询中使用
max with
，但也可以默认为
mobile
，您可以使用
minwidth
进行区分。我找不到此解决方案

因为媒体查询在运行阶段工作。Sass在编译阶段工作

因此，我将html的字体大小设置为62.5%（10px）

然后用rem稍微容易一点

html {
     font-size: 62.5%; // 10px;
}

@media screen and (min-width: 769px) { 
    html { 
        font-size: 125%; // 20px;
    }
}

.example {
   padding: 0.5rem; // 5px => 10px  
}


更具体地说，我不希望在我的函数中传递任何额外的参数，相反，我的函数应该能够根据媒体屏幕返回基本大小。例如，我的body基本字体大小是
16px
，这是另一种字体大小在rem上工作的基础。如果我将body基本字体大小更改为12，则其余的字体大小都会更改它的rem值基于它。。