我在下面使用此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)