无需媒体查询的流畅排版。

时间:2018-07-18 18:34:16

标签: css sass responsive typography

我在下面使用此mixin生成基于视口的文本的最小字体和最大字体。

但是问题是当我的代码放置在CMS中时,CMS的“框架”与视口无关,媒体查询也不会触发,因为实际的“媒体”表示桌面未更改。

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) 
{
    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
    $dimension: if(unit($responsive) == 'vh', 'height', 'width');
    $min-breakpoint: $min / $responsive-unitless * 100;
    @media (max-#{$dimension}: #{$min-breakpoint}) {
      font-size: $min;
    }
    @if $max {
      $max-breakpoint: $max / $responsive-unitless * 100;
      @media (min-#{$dimension}: #{$max-breakpoint}) {
        font-size: $max;
      }
    }
    @if $fallback {
      font-size: $fallback;
    }
    font-size: $responsive;
  }

我已经查看了有关此问题的所有答案: Font scaling based on width of container

但我似乎没有解决办法。

(我不能使用JS)

0 个答案:

没有答案