Question

几乎所有的问题和答案都涉及到视口大小的讨论；这不是我的问题。

拿这支笔... 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的...
我已经尝试过vh，并且在视口高度发生变化（与vw相同的问题）之前，它都可以正常工作。
我阅读了一些有关vb的信息（关于父块），但这似乎不起作用？我相信它仍然只是理论上的。
我知道JS-options可以计算父级的高度并对其进行设置...但是我觉得这是CSS应该能够完成的工作，而我却缺少一个难题。 li>
答案可以在转换中吗？！还是calc()？

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

Answer 1

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

似乎可以很好地扩展-我尚未通过浏览器对其进行测试...

Answer 2

您在这里：

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;
    }
  }
}

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

2 个答案: