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

我试图使我的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

---

也许这对你有帮助

$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);
}