使用@mixin 或@function 根据屏幕大小更改字体大小答案

【问题标题】：Using @mixin or @function to change font sizes based on screen size使用@mixin 或@function 根据屏幕大小更改字体大小
【发布时间】：2021-02-02 07:24:51
【问题描述】：

我正在尝试使我的 scss 变量库更具响应性。目前，我有几种不同的字体大小，我想根据屏幕大小进行更改。我想使用函数或 mixin 来根据屏幕大小动态更改字体大小。

下面的代码是基本思想。以常见的屏幕宽度插入基本尺寸并从中获得响应尺寸。但是，我不能在 mixin 中返回值，也不能在函数中使用媒体查询。

@function resize($size) {
 $result: $size;
 @media only screen and (max-width: $phone) {
   $result: $size * 0.75;
 }
 @media only screen and (max-width: $tablet) {
   $result: $size * 0.75;
 }
 @media only screen and (max-width: $laptop) {
   $result: $size * 200;
 }

 @media only screen and (max-width: $desktop) {
   $result: $size * 0.75;
 }

 @media only screen and (max-width: $large-display) {
   $result: $size * 0.75;
 }
 @return $result
}
$h1-font-size: resize(1.5vmin) // outputs a size in the same unit that changes based on screen size

【问题讨论】：

标签： css

【解决方案1】：

也许这对你有帮助。

$phone: 320px;    
$tablet: 500px;
$laptop: 1200px;
$desktop: 1400px;
$large-display: 1920px;

@mixin resize($size) {
      $result: $size;
        @media only screen and (max-width: $large-display){
          $result: $size * 2;
          font-size: $result;
      }
      @media only screen and (max-width: $desktop){
          $result: $size * 1.5;
          font-size: $result;
      }
      @media only screen and (max-width: $laptop){
          $result: $size * 1;
          font-size: $result;
      }
      @media only screen and (max-width: $tablet){
          $result: $size * .75;
          font-size: $result;
      }
        @media only screen and (max-width: $phone) {
          $result: $size * .5;
          font-size: $result;
        }
    }


h1 {
    @include resize(40px);
}

【讨论】：