代码之家 › 专栏 › 技术社区 › Benjamin

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

sass css3 css html

Benjamin · 技术社区 · 6 年前

我在做一个 scss 基于网页并遇到问题。我有以下的 scss系统 转换字体的函数 px 单位到 rem 。

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

在上面的函数中 $base-size 是静止的 16 但我想改变 base-size 到 12 当我瞄准移动设备以减少更改 font-size 整个项目。有什么办法我可以 $基本大小 动态,以便该值根据屏幕分辨率变化。任何帮助都将不胜感激。

2 回复 | 直到 6 年前

iamrobin. 6 年前

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

Cody MacPixelface 6 年前

可能有很多解决办法,这取决于你能配合多少复杂度。

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

$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 .