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

Posted 2023-03-05

【中文标题】根据 flexbox 容器的高度设置字体大小

【英文标题】：Setting font-size based on height of flexbox container

【发布时间】：2018-10-29 08:51:38

【问题描述】：

我想知道是否可以使用弹性框项目的高度来设置字体大小。我有一个使用视口单元设置的 flexbox 容器，项目的高度由 flex-grow 属性确定。我正在寻找的是将字体大小设置为这些项目的高度，并在视口更改时保留这些关系。

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

https://codepen.io/NewbCake/pen/JvwNJq （垂直调整窗口大小以设置字体大小）

我愿意接受有关如何解决此问题或可能遇到的任何陷阱的任何建议。

html

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

感谢任何帮助！

【参考方案1】：

如果您拥有flex-grow 的控制权，您可以根据容器的高度进行一些计算以获取font-size。因此，如果您有一个1 + 2 作为 flex-grow，这意味着第二个将是第一个的两倍，因此我们可以将 H 的高度定义为 H+2*H = height of container = 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>

【讨论】：

嗨@Temani Afif 感谢您的回复。使用 calc 设置字体大小是一种有趣的方式。但是，我希望保持它更灵活，并且能够仅在一个地方更改容器高度，同时仍保持 flex-grow 关系，反之亦然。但也许可以通过将容器高度和 flex-grow 属性设置为单独的变量来做到这一点？我不太熟悉如何在 CSS 中做到这一点。另一个问题是，这不会随着视口的变化而动态变化（除非刷新页面）。我们可以通过保留 JS 来做到这一点吗？

@NewbCake 您可以使用 CSS 变量（检查我的编辑）...顺便说一下，这不会动态变化吗？调整大小时它不会在 sn-p 上改变吗？ ...顺便说一句，不再需要 jS 功能

@ Temani Afif 可以很好地处理变量。是否可以使用变量设置 flex-grow 计算是否仅基于变量？通过不动态更改，我的意思是当我更改浏览器窗口的大小时，内容不会调整大小。 JS是否只能用于检测窗口resize和重新计算font-size值？

@NewbCake 我回答的重点是它动态调整大小:) 很惊讶你说它不是......你使用的是哪个浏览器？

它可以在 Chrome 和 Firefox 中运行，但不能在 Safari 中运行...知道为什么吗？