基于容器大小的字体缩放

Question

基于容器大小的字体缩放

cssresponsive-designfont-size

1755

我很难理解字体缩放。

目前我有一个网站，正文的font-size为100%。100%是相对于什么呢？这似乎计算出16像素。

我一直以为100%会与浏览器窗口大小有关, 但显然不是这样，因为无论窗口是否调整大小到移动设备或全屏桌面，都是16像素。

我该如何使网站上的文本根据其容器自适应缩放？我试过使用em，但它也不能缩放。

我的想法是，当您调整大小时，像菜单这样的东西会变形，因此我需要减少与容器宽度相关的.menuItem等元素的pxfont-size。（例如，在大型桌面上的菜单中，22px非常完美。在平板电脑宽度下，16px更合适。）

我知道我可以添加断点，但我真的希望文本能够自适应缩放，并且拥有额外的断点，否则，我将控制文本的每100像素宽度而拥有数百个断点。

- Francesca

51

你需要的是响应式或视口尺寸字体。http://css-tricks.com/viewport-sized-typography/ - gearsdigital

12

看看 **FitText**。 - Patsy Issa

4

使用CSS容器查询。 - Janosh

@PatsyIssa 有没有 fittext 的 React 版本？ - undefined

41个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shahriar · Answer 1

这个怎么样？
将父元素的字体大小设置为其宽度，然后使用百分比来设置文本元素的字体大小。

.element {
    width: 400px;
    font-size: 400px; /* equal to width */
}

.text {
    width: 10%;  /* will be 40px */
}

我觉得这个特别容易，尤其是当你处理图标时，但也适用于文本。

/* start of styling */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  display: block;
  background: cornflowerblue;
  height: max-content;
  margin-bottom: 32px;
}


/* end of styling */

.box p {
  font-size: 20%;
}

<div class="box" style="width: 400px; font-size: 400px">
  <p>Text</p>
</div>

<div class="box" style="width: 128px; font-size: 128px">
  <p>Text</p>
</div>


<div class="box" style="width: 10vw; font-size: 10vw">
  <p>Text</p>
</div>

<div class="box" style="width: 64px; font-size: 64px">
  <p>Text</p>
</div>