css 流体排版

Posted 2021-05-13

/* https://www.smashingmagazine.com/2016/05/fluid-typography/ */
  
/* Older browsers */
html { font-size: 16px; }
  
/* Modern browsers only need this one */
  
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
  
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* This technique forces Safari below version 8 and Internet Explorer below version 11 to recalculate the font size at set breakpoints.*/