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

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

关注
发信
关注(28)粉丝(399)

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

本文介绍了CSS:缩放字体大小以适合父块元素的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我有一个非常基本的 Bootstrap 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 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>......

......

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

.col {填充:0；}.col:not(:last-child) {边界权:无！重要；}.row:not(:last-child) .col {边界底部:无！重要；}.瓦 {填充:100% 0 0；字体大小:5vw；}.tile 跨度{位置:绝对；左:0；顶部:50%；行高:0；宽度:100%；文本对齐:居中；}

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

是否有任何仅 CSS 表示font-size = container_height"的方式?

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

解决方案

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

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

每一列变成这样:

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

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

.tile svg {位置:绝对；左:0；顶部:0；行高:0；宽度:100%；高度:100%；填充:#333；}

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

Almost every question and answer I have found talks about the viewport size; this isn't really my issues.

Take this Pen... https://codepen.io/njt1982/pen/pZjZNM

I have a very basic Bootstrap 4 grid like this:

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

And some CSS to make these into squares (using the padding-top: 100% trick):

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

The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. I'd like to avoid tonnes of media queries to "tune" it.

Is there any CSS-only way of saying "font-size = container_height"?

  • font-size: 100% seems to just set the font to the base size (not the parent size, like you'd expect height: 100% to do). Some goes for the likes of em's...
  • I've tried vh and that works fine until the viewport height changes (so same problem as vw).
  • I read something about vb (about the parent block), but that doesn't seem to work? I believe it is still only theoretical.
  • I am aware of JS-options which could calculate the height of a parent and set it... But I feel like this is something CSS should be able to do and I'm missing a piece of a puzzle.
  • Could the answer lie in transforms?! or calc()?

UPDATE: Possible answer using SVGs? https://stackoverflow.com/a/51333267/224707

解决方案

One possible solution I have found is using SVG's...

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

Each column becomes this:

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

Then we drop all notion of font-size and do this:

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

Seems to scale pretty well - I have not, however, browser tested it...

这篇关于CSS:缩放字体大小以适合父块元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-05 22:10
Powered by LMLPHP ©2024 缩放字体大小以适合父块元素的高度 0.050982