Как сделать размер шрифта относительно родительского div?

Я хочу, чтобы текст внутри моего div оставался таким же размером в процентном отношении % к родительскому div. И.Е. Я хочу, чтобы мой текст имел font-size 50% от ширины родительских родителей. Поэтому, когда размер страницы меняется, текст всегда остается того же размера в %.

Вот что я говорю:

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

Ответы

Ответ 1

Использование font-size: x% не относится к ширине родительского элемента, но размер шрифта обычно имеет элемент.

Итак, если ваш родительский элемент устанавливает font-size: 12px, то font-size: 50% в элементе означает, что у элемента есть font-size of 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>

Ответ 2

Как я решил эту проблему, было использовать javascript для измерения контейнера, а затем установить размер шрифта в px на этом контейнере. Как только эта базовая линия будет установлена для контейнера, относительный размер шрифта для всего содержимого будет правильно масштабироваться с использованием em или%.

Я использую React:

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

CSS

div {
  font-size: 2em;
}

Ответ 3

Вы можете использовать элементы видового экрана для изменения размера окна. 100vw - полная ширина окна, а 100vh - высота.

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

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