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

Question

I want to implement the example from css-tricks based on rems. This is what I got so far. However, the scaling does not work as intended, and the font size increases only tiny amounts. What is the mistake?

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

I assume that 2 * ((100vw - 20rem) / 680) returns a px value. If that's true. How can I change it to return rem instead?

Edited to add some clarifications: I want to use rem instead of px because this allows the user to overwrite the default font size in the browser.

The term 2 * ((100vw - 20rem) / 680) is between 0 and 2 (1 rem equals 16px on normal font size). This is what I want to achieve. I want to have font-size: 1rem + [0, 2]rem between 320 and 1000px viewport width. A linearly increasing rem function based on the viewport width.

Here is a link to a sandbox example .

Edit 2: I think what I want to achieve is not possible. If the user increases the default font size by 50%, I want the scaling factor also increase by 50%: font-size: 1rem + [0, 2 * 1.5]rem .

The current problem is that the part 2 * ((100vw - 20rem) / 680)) needs to be rem based. This is not possible because there is no way in CSS to strip the unit. If I could strip the unit, I could do this: 2rem * strip-unit((100vw - 20rem) / 680))

Answer 1

If you want a responsive font size then you can use View Width too, no need to use calc or rem for that.

Just change this so you can try it out:

HTML {
  font-size: 5vw;
}

View width goes from 0 to 100 so you know how much room you have to work with.

edit: I personally haven't found out how to scale on both axis yet but just the X-axis works good enough in most cases.

Answer 2

There is a great article on CSS Fluid Fonts at Modern Fluid Typography Using CSS Clamp

I made a simple Excel spread sheet that will generate the clamp function according to the article. CSS Clamp Excel Calculator

Answer 3

Here is a solution for fluid fonts I got from Creating a Fluid Type Scale with CSS Clamp

After some tweaking I ended up with the following Sass code to generate the clamp function.

    /*
   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});
}