clamp

clamp - MDN clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 、、、

缺点：仅支持 Edge 79+，Firefox 75+，Chrome 79+ 等新版本的浏览器

  1. <html>
  2.   <head>
  3.     <style>
  4.       html {
  5.         font-family: sans-serif;
  6.       }
  8.       body {
  9.         margin: 0 auto;
  10.         width: min(1000px, calc(70% + 100px));
  11.       }
  13.       h1 {
  14.         letter-spacing: 2px;
  15.         font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  16.       }
  18.       p {
  19.         line-height: 1.5;
  20.         font-size: max(1.2rem, 1.2vw);
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <h1>Simple responsive test</h1>
  26.         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
  27.         <p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
  28.   </body>
  29. </html>

Fluid Typography

https://css-tricks.com/snippets/css/fluid-typography/

  1. /* scale font-size: 16px ~ 22px */
  2. html {
  3.   font-size: 16px;
  4. }
  5. @media screen and (min-width: 320px) {
  6.   html {
  7.     font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  8.   }
  9. }
  10. @media screen and (min-width: 1000px) {
  11.   html {
  12.     font-size: 22px;
  13.   }
  14. }

font-size 计算公式：
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Sass

sass mixin:

  1. @function strip-unit($value) {
  2.   @return $value / ($value * 0 + 1);
  3. }
  5. @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  6.   $u1: unit($min-vw);
  7.   $u2: unit($max-vw);
  8.   $u3: unit($min-font-size);
  9.   $u4: unit($max-font-size);
  11.   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
  12.     & {
  13.       font-size: $min-font-size;
  14.       @media screen and (min-width: $min-vw) {
  15.         font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
  16.       }
  17.       @media screen and (min-width: $max-vw) {
  18.         font-size: $max-font-size;
  19.       }
  20.     }
  21.   }
  22. }

使用 mixin：

  1. $min_width: 320px;
  2. $max_width: 1200px;
  3. $min_font: 16px;
  4. $max_font: 24px;
  6. html {
  7.   @include fluid-type($min_width, $max_width, $min_font, $max_font);
  8. }

Less

  1. .fluid-type(@property, @min-vw, @max-vw, @min-size, @max-size) {
  3.   @{property}: @min-size;
  5.   @media screen and (min-width: @min-vw) {
  6.     @{property}: calc( @min-size ~" + " unit(@max-size - @min-size) ~" * ((100vw - " @min-vw ~") /" unit(@max-vw - @min-vw) ~")" );
  7.   }
  9.   @media screen and (min-width: @max-vw) {
  10.     @{property}: @max-size;
  11.   }
  13. }