css - 如何实现 :root { font-size: calc(100vw / 40); } 缩放字体大小

Answer 1

您不需要使用@media来检测用户的屏幕尺寸。vw/vh 的美妙之处在于它们会根据视口的大小自动进行调整。在将上述规则添加到样式表后，只需使用 vw/vh/rem 进行所有尺寸测量，即使用户调整浏览器的大小，您的布局也会缩放。

这是一个简单的例子。您可以看到width、height和属性都专门使用 rems 或视口单位margin-left。font-size运行代码片段，全屏显示并调整浏览器大小，您将看到整个布局（包括h1列和文本）如何随着浏览器窗口的宽度缩放（如:rootCSS中 vw 的使用所示规则）。

:root {
  font-size: calc(100vw / 40);
}

body, h1, h2 { margin: 0; }

h1 {
  position: fixed;
  width: 15rem;
  height: 100vh;
  font-size: 4rem;
  background-color: #ccc;
}

h2, p { margin-left: 15rem; }

h2 {
  font-size: 2.4rem;
  background-color: #ff0;
}

p {
  font-size: 1.2rem;
}

<h1>Title</h1>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ea sed adversarium
   definitionem, legere malorum laboramus ne cum. Dictas corrumpit vix at, sea
   platonem senserit sapientem ne. At vel laudem audire bonorum. Perfecto posidonium
   eu has, ullum mollis inimicus eos te, sit eu novum atomorum.
<p>Alii libris evertitur in vix, congue ocurreret ut usu, nostro dolores vulputate
   pri ex. Eu eam sint moderatius, eu eos wisi corpora, est sanctus corpora ad. Cu
   nam utamur saperet. Qui id purto quaerendum, ex usu iudico alterum voluptatibus.
<p>Illum mucius praesent id eam, oratio habemus eum ei. Saepe docendi at est, eu mea
   perfecto voluptaria, has admodum recusabo contentiones te. Putant definitionem sea
   ea, viris tantas ad cum. Wisi melius ius ut, est te unum aliquando. Ea quo
   ancillae philosophia.