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

Question

根据 CSS Values and Units Module Level 3, W3C Candidate Recommendation 8.1 Mathematical Expressions: ‘calc()’:

The following sets the ‘font-size’ so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.
:root {
  font-size: calc(100vw / 40);
}
If the rest of the design is specified using the ‘rem’ unit, the entire layout will scale to match the viewport width.

我想知道如何实现它。我假设我需要在某处使用@media 来检测用户的屏幕大小，然后如图所示设置 :root，然后对所有字体大小使用 rem。有人可以给我一个简单的逐步 and/or 反馈，看看这是否真的有效吗？谢谢

Answer 1

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

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

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

How to implement :root { font-size: calc(100vw / 40); } to scale font-size(s)

css

media-queries

viewport-units