我希望我的div中的文本与父div保持相同的大小，百分比为%。即。我希望我的文本的font-size为父级div宽度的50%。因此，当页面大小改变时，%中的文本始终保持相同大小。
下面是我要说的：
null
.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>null
全屏运行此代码段并尝试调整页面大小，看看文本大小是如何变化的，并且不适合div边框。我怎样才能防止它发生，所以它总是留在边界内？
使用font-size:x%不是相对于父元素的宽度，而是相对于元素通常具有的font-size。
因此，如果元素的父元素设置了font-size:12px，则元素中的font-size:50%表示元素的font-size为6px
您要使用的是视区百分比:vw
例如:font-size:2vw
null
.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%;
display: inline-block;
margin-left:40%;
font-size : 2vw;overflow: hidden;
}
.counter-element-value{
position:absolute;
top:50%;
width: 50%;
max-width:50%;
display: inline-block;
height:100%;
padding-left:30%;
font-size : 2vw;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>
我解决这个问题的方法是使用javascript测量容器，然后在该容器上设置px字体大小。一旦为容器设置了基线，那么所有内容的相对字体大小将使用em或%正确缩放。
我在用React：
<div style={{ fontSize: width / 12 }} >
...
</div>
CSS：
div {
font-size: 2em;
}
