markdown 响应式排版

Posted 2021-05-05

´´´css
body {
  // Never get smaller than this
  font-size: 14px;
}

@media (min-width:600px) {
  body {
    font-size: 16px;
  }
}

@media (min-width:800px) {
  body {
    font-size: 18px;
  }
}

@media (min-width:1000px) {
  body {
    // Never get larger than this
    font-size: 20px;
  }
}
´´´


*One way to get fluid typography is to change the font-size from pixels (px) to viewport units (vw)*

´´´css
body {
  font-size: 2vw;
}
´´´

*Now we're caught in a situation where the font-size can get infinitely smaller and larger.*
*If we use viewport units and calc(), the size can be fluid and within a defined range.*




´´´css
body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
´´´

Example:
- minimum 14px at smallest viewport (300px)
- maximum 26px at the larget viewport (1600px)
*For the vertical rythm, we can apply the same equation to the line-height property*

´´´css
body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
´´´