首页 文章

如何实现：root {font-size：calc（100vw / 40）;缩放字体大小

提问于
浏览 次
0

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

以下设置'font-size'，以便恰好40em适合视口，确保无论屏幕大小如何，大致相同数量的文本总是填满屏幕 . ：根 {
font-size：calc（100vw / 40）;
}
如果使用'rem'单位指定设计的其余部分，则整个布局将缩放以匹配视口宽度 .

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

css css3 media-queries viewport-units

1 回答

  • 1

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

    这是一个简单的例子 . 您可以看到 width ， height ， margin-left 和 font-size 属性都只使用rems或viewport单元 . 运行代码段，全屏显示并调整浏览器大小，您将看到整个布局（包括 h1 列和文本）如何与浏览器窗口的宽度一致（如使用vw中所示） :root CSS规则） .

    :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.
    回复于

相关问题