css 响应式流体排版字体大小

Posted 2021-05-13

/* Ideal character per line (more or less) */
Using a rough estimate of 1rem = 1character, we can control the flow of text for a single column of content, in a mobile-first approach

.container {
  width: 100%;
}

@media (min-width: 85rem) {
  .container {
    width: 65rem;
  }
}


/* Responsive Font-Size Using Calc */

/* These values are the minimum and maximum viewport sizes to apply the font scaling */
$min_width: 400;
$max_width: 800;
/* These values represent the range of font-size to apply */
/* These values effect the base font-size, headings and other elements will scale proportionally */
$min_font: 12;
$max_font: 24; 
 
:root { font-size: #{$min_font}px; }
@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  :root { 
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
  }
}
@media (min-width: #{$max_width}px){
   :root { 
     font-size: #{$max_font}px;
   }
}