Question

我正在基于scss的网页上工作，遇到问题。我具有以下scss函数，可将我的字体px单位转换为rem。

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

在上述功能中，$base-size是静态的，并且保持16，但是当我将移动设备作为目标时，我想将base-size更改为12，以便减少在整个项目中更改font-size的冗余。有什么方法可以使$base-size动态，以便根据屏幕分辨率更改值。任何帮助，将不胜感激。

Answer 1

据我所知，这是不可能的。 $ 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;
  }
}

Answer 2

可能有很多解决方法，具体取决于您可以处理多少复杂性。

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

$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，并且您可以与min-width区别。

Answer 3

我找不到此解决方案。

因为媒体查询在运行时阶段起作用。 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  
}

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

3 个答案: