html - CSS：缩放字体大小以适应父块元素高度

问题描述

我发现的几乎所有问题和答案都在谈论视口大小；这真的不是我的问题。

拿这支笔... https://codepen.io/njt1982/pen/pZjZNM

我有一个非常基本的 Bootstrap 4 网格，如下所示：

<div class="container mt-4">
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  ...
  ...
</div>

还有一些 CSS 将它们变成正方形（使用padding-top: 100%技巧）：

.col {
  padding: 0;
}
.col:not(:last-child) {
  border-right: none !important;
}
.row:not(:last-child) .col {
  border-bottom: none !important;
}
.tile {
  padding: 100% 0 0;
  font-size: 5vw;
}
.tile span {
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 0;
  width: 100%;
  text-align: center;
}

这里的问题是 5vw 在我的 2560px 宽视口上使字体大小正好合适，但是当我到达下断点时，它不再填充单元格。我想避免大量的媒体查询来“调整”它。

是否有任何仅使用 CSS 的方式来表示“font-size = container_height”？

font-size: 100%似乎只是将字体设置为基本大小（而不是父大小，就像您期望height: 100%的那样）。有些人喜欢em's...
我已经尝试过vh，并且在视口高度发生变化之前效果很好（与大众相同的问题）。
我读了一些关于 vb （关于父块）的东西，但这似乎不起作用？我相信这仍然只是理论上的。
我知道 JS-options 可以计算父母的高度并设置它......但我觉得这是 CSS 应该能够做的事情，我错过了一块拼图。
答案可能在于变换吗？！还是calc()？

更新：使用 SVG 的可能答案？https://stackoverflow.com/a/51333267/224707

标签： htmlcssresponsive-designfont-size

我发现的一种可能的解决方案是使用 SVG...

https://codepen.io/njt1982/pen/EpVeYw

每列变成这样：

<div class="col border">
  <div class="tile">
    <svg viewBox="0 0 20 20">
      <text x="50%" y="14" text-anchor="middle">A</text>
    </svg>
  </div>
</div>

然后我们放弃所有字体大小的概念并这样做：

.tile svg {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  fill: #333;
}

似乎可以很好地扩展-但是，我还没有通过浏览器对其进行测试...

html - CSS：缩放字体大小以适应父块元素高度

问题描述

解决方案

推荐阅读