相对于父div的大小？

我希望我的div中的文本保持与父div的%百分比相同的大小。 IE我希望我的文本具有父宽度的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>

---

使用font-size: x%不是相对于父级的宽度，而是元素通常具有的字体大小。

所以如果元素的父元素设置font-size: 12px那么元素中的font-size: 50%表示该元素的font-size为6px

你想使用的是视口百分比： vw

例如： font-size: 2vw

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

---

您可以使用视口单位来调整窗口大小。 100vw是全窗宽， 100vh高。

.resizable-text {
  font-size: 50vw;
}

<div class="resizable-text">
  Text
</div>

链接地址: http://www.djcxy.com/p/15339.html

上一篇: size relative to parent div?

下一篇: Font scaling based on width of container