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

【问题标题】：CSS: Scale font-size to fit parent block element heightCSS：缩放字体大小以适应父块元素高度
【发布时间】：2018-12-22 07:08:44
【问题描述】：

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

拿着这支笔...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，并且在视口高度发生变化之前效果很好（与 vw 的问题相同）。
我读过一些关于 vb 的内容（关于父块），但这似乎不起作用？我相信这仍然只是理论上的。
我知道 JS-options 可以计算父级的高度并设置它...但我觉得这是 CSS 应该能够做的事情，我错过了一块拼图。李>
答案可能在于转换吗？！或calc()?

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

【问题讨论】：

您需要针对这种特殊情况的通用解决方案吗？
嗯，我最初的目标是一个通用的“字体大小 = 父身高”解决方案，但我愿意接受来自邪恶和明智社区的建议！ :)
我可能会有不同的想法：我将字体大小设置为特定的可缩放值，然后考虑该值构建布局，这样可能更容易
那肯定会更容易，是的......但它不像“响应式”。

标签： html css responsive-design font-size

【解决方案1】：

给你：

https://codepen.io/sphism/pen/LBGmRm

Flexbox 解决方案，随浏览器缩放，纵向和横向均可使用，字体缩放，漂亮干净的 html，没有 svg。

编辑：添加了 size-* 类，因此您只需添加类即可轻松更改网格大小，例如 .grid.size-4 将是 4x4 网格。

html:

<div class="container">
  <div class="grid size-7">
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
    <div class="tile">A</div>
    <div class="tile">B</div>
    <div class="tile">C</div>
    <div class="tile">D</div>
    <div class="tile">E</div>
    <div class="tile">F</div>
    <div class="tile">G</div>
    <div class="tile">H</div>
  </div>
</div>

scss:

// 100 would have no space around it
// $gridSize: 90vw; // Works in portrait.
// $gridSize: 90vh; // Works in Landscape.
$gridSize: 90vMin; // Works in both.

.container {
  // Full size of page
  height: 100vh;
  width: 100vw;
  // Center the grid x and y
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  // Grid will center in container if you want a bit of space around it.
  height: $gridSize;
  width: $gridSize;

  // This is how we make the grid
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

// Styles for all tiles
.tile {
  display: block;
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
}

// Number of rows and columns.
// $size: 8;
@for $size from 1 through 8 {

  // eg 100/8 
  $tileSize: $gridSize / $size;
  // Half th esize of the tile, or whatever you want.
  $fontSize: $tileSize * 0.5;

  .size-#{$size} {
    .tile {
      // Constrain the tiles to exact size we want.
      width: $tileSize;
      min-width: $tileSize;
      max-width: $tileSize;
      height: $tileSize;
      min-height: $tileSize;
      max-height: $tileSize;
      flex-basis: $tileSize;

      // Set fonts to same line height as tile, center them and set font size.
      line-height: $tileSize;

      font-size: $fontSize;
    }


    // Just hide extra divs so it renders properly.
    $maxTiles: $size * $size + 1;
    .tile:nth-child(n + #{$maxTiles}) {
      display: none !important;
    }
  }
}

【讨论】：

【解决方案2】：

我发现的一种可能的解决方案是使用 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;
}

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

【讨论】：