雨巷 (rainto.top)

字体自适应宽度

笔记 / 

最近逛css award发现一个挺有意思的方法实现字体自适应宽度,所以记录下。whoisguilty

css
:root {
  --vw-screen: 1440;
}

@media (max-width: 1023px) {
  :root {
    --vw-screen: 768;
  }
}

@media (max-width: 767px) {
  :root {
    --vw-screen: 375;
  }
}

html {
  font-size: calc(16 / var(--vw-screen) * 100 * 1vw);
  line-height: calc(20 / var(--vw-screen) * 100 * 1vw);
}