Fluid typography without media queries.

Question

I am using this mixin below to generate a min font and a max font of a text based on the viewport.

However the issue is when my code is placed within a CMS, the "frame" of the CMS is not related to the viewport, also the media queries will not fire as the actual "media" say the desktop has not changed.

@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;
  }

I've viewed all the answers on this question: Font scaling based on width of container

but I don't seem to have a solution..

(I can't use JS)