css - 如何使字体大小相对于父 div？

Question

我希望我的 div 中的文本以 % 百分比与父 div 保持相同的大小。IE。我希望我的文本具有父 div 宽度的 50% 的 font-size。因此，当页面大小发生变化时，% 中的文本始终保持相同大小。

这就是我要说的:

.counter-holder{
	display: block;
	position: absolute;
	width:90%;
	height:20%;
	top: 70%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}


.counter-element-box{
	position:relative;
	vertical-align: text-top;
	border-style: solid;
    border-width: 1px;
    width: 20%;
    height: 100%;
    float:left;
    margin: 6%;
}

.counter-element-text{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	margin-left:50%;
	font-size : 80%;overflow: hidden;
}

.counter-element-value{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	padding-left:30%;
	font-size : 80%;overflow: hidden;
}

<div class="counter-holder">
	<div class="counter-element-box">
		<div id="years" class="counter-element-value">
			0
		</div>
		<div class="counter-text counter-element-text" >
		    Years
		</div> 
	</div>
	<div class="counter-element-box">
		<div id="missions" class="counter-element-value">
			0  
		</div>
		<div class="counter-text counter-element-text" >
		    Missions
		</div>
	</div> 
	<div class="counter-element-box">	
		  <div id="team" class="counter-element-value">
			   0 
		  </div>
		  <div class="counter-text counter-element-text" >
		    	Team
		  </div>
	</div>		    	
</div>

全屏运行此代码段并尝试调整页面大小，看看文本大小如何变化以及如何不适合 div 边框。如何防止它发生，使其始终保持在边界内？

Answer 1

我解决这个问题的方法是使用 javascript 测量容器，然后在该容器上设置以 px 为单位的字体大小。一旦为容器设置了该基线，所有内容的相对字体大小将使用 em 或 % 正确缩放。

我正在使用 React:

<div style={{ fontSize: width / 12 }} >
  ...
</div>

CSS:

div {
  font-size: 2em;
}