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

【问题标题】：How to implement :root { font-size: calc(100vw / 40); } to scale font-size(s)如何实现 :root { font-size: calc(100vw / 40); } 缩放字体大小
【发布时间】：2015-07-12 18:15:41
【问题描述】：

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

以下设置“font-size”，使 40em 正好适合视口，确保无论屏幕大小如何，总有大致相同数量的文本填满屏幕。
:root {
  font-size: calc(100vw / 40);
}
如果设计的其余部分使用“rem”单位指定，则整个布局将缩放以匹配视口宽度。

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

【问题讨论】：

标签： css media-queries viewport-units

【解决方案1】：

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

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

【讨论】：

太棒了！非常感谢！