How to make font-size relative to parent div?

问题

I want text inside my div to remain same size in % percentage ratio to a parent div. I.E. 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>

Run this snippet in full screen and try resizing the page and see how text size is changing and not fitting inside the div borders. How can I prevent it from happening, so it always remains inside the borders?

回答1:

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>

回答2:

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

回答3:

If you talk about responsive scaling, then you can implement it, but all depends on what you are trying to achieve. In the code below i have created a div container with ratio (height/width = 1/2). When you change the size of the browser window, container and text will scale responsively.Depending on the window size it will change the font according to VW(viewport width) and VH(viewport height). To add new font size you have to set it twice once according to the -vw and second time according to -vh. I have used CSS variables(var), that way its easier to understand the code.

Example

body {
    background-color: #000;
    padding: 0;
    margin:0;
}

/* position element in the middle */
.middle {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 


/* Ratio: height/width */ 
:root {
    --ratio: 0.5;
    --reverse-ratio: 2;
    --container-width: 50vw;
    --container-height: 50vh;

    --font1-sizeVW: 15vh;
    --font1-sizeVH: calc(var(--ratio) * 15vw);

    --font2-sizeVW: 6vh;
    --font2-sizeVH: calc(var(--ratio) * 6vw);
}

#container {

    background-color: pink;
    width: var(--container-width);
    height: calc(var(--ratio) * var(--container-width));

    max-width: calc(var(--reverse-ratio) * var(--container-height));  
    max-height: var(--container-height);
}

#span1 {
    font-size: var(--font1-sizeVW);   
}

#span2 {
    font-size: var(--font2-sizeVW);  
}

/* max-width: (reversRatio * 100vh) */
@media all and (max-width: 200vh) {  

    #container {
        background-color: green;
    }

    #span1 {  
        font-size: var(--font1-sizeVH); 
    } 

    #span2 {  
        font-size: var(--font2-sizeVH);
    } 
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    </style>
</head>
<body>
    <div id="container" class="middle">
        <span id="span1">Hello</span>
        <span id="span2">Hello again</span>
    </div>
</body>
</html>

回答4:

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>

回答5:

Responsive Font Size/ Text responsive according to the browser window :-

The text size can be set with a vw unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

For Example

<div>
<h2 style="font-size:10vw;">Ganesh Pandey</h2>
</div>

Resize the browser window to see how the text size scales.

来源：https://stackoverflow.com/questions/30693928/how-to-make-font-size-relative-to-parent-div

标签

css

font-size