size relative to parent div?

I want text inside my div to remain same size in % percentage ratio to a parent div. IE I want my text to have font-size of 50% of parents div width. So when page size is changing, text always remains the same size in % .

Here Is what I'm talking about:

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

---

Using font-size: x% is not relative to the width of the parent but the font-size the element would normally have.

So if your element's parent sets font-size: 12px then font-size: 50% in element means that element has a font-size of 6px

What you want to use is viewport percentage: vw

for example: 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>

---

The way I solved this problem was to use javascript to measure the container and then set the font size in px on that container. Once that baseline is set for the container then the relative font sizing of all the content will scale correctly using em or %.

I'm using React:

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

CSS:

div {
  font-size: 2em;
}

---

You can use viewport units to resize with the window. 100vw is full window width, and 100vh - height.

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

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

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

上一篇: 动态更改字体

下一篇: 相对于父div的大小？