基于rem的css响应流体html字体大小

Question

我想从基于rems的css技巧中实现这个例子。这就是我到目前为止得到的。然而，缩放并没有按预期进行，字体大小只增加了很小的一部分。错在哪里？

html {
font-size: 1rem;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(1rem + 2 * ((100vw - 20rem) / 680));
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 3rem;
}
}

我假设2 * ((100vw - 20rem) / 680)返回一个px值。如果这是真的。如何将其更改为返回rem？

编辑以添加一些澄清：我想使用rem而不是px，因为这允许用户覆盖浏览器中的默认字体大小。

术语2 * ((100vw - 20rem) / 680)介于0和2之间(在正常字体大小上，1 rem等于16px(。这就是我想要实现的。我希望font-size: 1rem + [0, 2]rem的视口宽度在320到1000px之间。基于视口宽度的线性递增rem函数。

下面是一个沙箱示例的链接。

编辑2：我想我想要实现的是不可能的。如果用户将默认字体大小增加50%，我希望缩放因子也增加50%：font-size: 1rem + [0, 2 * 1.5]rem。

当前的问题是零件2 * ((100vw - 20rem) / 680))需要基于rem。这是不可能的，因为CSS中没有办法剥离单元。如果我能剥去装置，我可以这样做：2rem * strip-unit((100vw - 20rem) / 680))

Answer 1

如果你想要一个响应的字体大小，那么你也可以使用View Width，而不需要使用calc或rem。

只要改变这个，你就可以尝试一下：

HTML {
font-size: 5vw;
}

视图宽度从0到100，这样您就可以知道需要使用多少空间。

编辑：我个人还没有找到如何在两个轴上缩放，但在大多数情况下，只有X轴就足够了。

Answer 2

以下是我从使用CSS Clamp 创建流体类型标尺中获得的流体字体解决方案

经过一些调整，我最终得到了下面的Sass代码来生成clamp函数。

/*
From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
Generates the css clamp function.  
Focused on font-size, but may be used for margins and padding
Usage:  
clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
font-size: clamped(26px, 36px, 600px, 1200px);    
font-size: clamped(26px, 36px);      //using width default values
Output:
font-size: clamp(1.63rem, 1.11vw + 1.28rem, 2.25rem);
*/
@use "sass:math";
@use "sass:map";
// Default min-mix browser width values for clamped function
$default-min-bp: 500px;           
$default-max-bp: 1400px;           
// Convert pixels to rems.
@function to-rems($px) {
$rems: math.div($px, 16px) * 1rem;
@return $rems;
}

//round a to number of decimal places.
@function rnd($number, $places: 0) {
$n: 1;
@if $places > 0 {
@for $i from 1 through $places {
$n: $n * 10;
}
}
@return math.div(math.round($number * $n), $n);
}
// Generate css for clamp
@function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
$slope: math.div($max-px - $min-px, $max-bp - $min-bp);
$slope-vw: rnd($slope * 100, 2);
$intercept-rems: rnd(to-rems($min-px - $slope * $min-bp), 2);
$min-rems: rnd(to-rems($min-px), 2);
$max-rems: rnd(to-rems($max-px), 2);
@return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
}