根据Flexbox容器的高度设置字体大小。

Question

根据Flexbox容器的高度设置字体大小。

5

我想知道是否可以使用flexbox项目的高度来设置字体大小。我的flexbox容器使用视口单位进行设置，项目的高度是通过flex-grow属性确定的。我想要做的是将字体大小设置为这些项目的高度，并在视口改变时保留这些关系。

我有一个基本的想法，有些效果，但我不确定如何仅隔离字母（基线到大写字母高度）并将其缩放到项目容器中。

欢迎提出任何建议，或者遇到任何问题，请参考以下HTML链接：https://codepen.io/NewbCake/pen/JvwNJq（垂直调整窗口大小以设置字体大小）。

<section class="center">
  <div class="container">
    <div class="item1">H</div>
    <div class="item2">H</div>
  </div>
</section>

CSS

section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.container_wide {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

.item2 {
  flex-grow:3;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

JS

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
    $(".item1").css("font-size", $(".item1").css("height"));
    $(".item2").css("font-size", $(".item2").css("height"));            
  }, 250);
});

非常感谢您的帮助！

- NewbCake

1个回答

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

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

- Temani Afif · Accepted Answer

如果您控制了flex-grow，则可以进行一些计算，根据容器的高度来获取font-size。因此，如果您有一个1 + 2作为flex-grow，则表示第二个将是第一个的两倍，因此我们可以将H高度定义为H+2*H = 容器高度=80vh，因此H = calc(80vh / 3)。

因此，第一个项目将具有font-size:H，而第二个项目将具有font-size:2*H。

您还可以考虑使用CSS变量来更好地处理此问题。

body {
   margin:0;
  padding:0;
  font-family: sans-serif;
}

header {
  display:flex;
  height:5vh;
}
section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  --h:80vh;
  height:var(--h);
  width:var(--h);
  border:1px solid blue;
}

.gauge {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:10vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  font-size:calc((var(--h) / 3));
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}

.item2 {
  font-size:calc((var(--h) / 3) * 2);
  flex-grow:2;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:1;
}

<header class="center">resize window vertically</header>
<section class="center">
  <div class="gauge">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
  <div class="container">
    <div class="item1">Haj</div>
    <div class="item2">Hlp</div>
  </div>
</section>