如何使字体大小相对于父div? [英] How to make font-size relative to parent div?
问题描述
我希望我的div中的文本与父div保持相同的大小,比例为%
.IE.我希望我的文本的 font-size
占父母div宽度的50%.因此,当页面大小更改时,文本在%
中始终保持相同大小.
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 %
.
这是我在说的:
.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>
以全屏方式运行此代码段,然后尝试调整页面大小,并查看文本大小如何变化且不适合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?
推荐答案
使用 font-size:x%
与父级的宽度无关,但是元素通常具有的字体大小
Using font-size: x%
is not relative to the width of the parent but the font-size the element would normally have.
因此,如果您元素的父元素设置 font-size:12px
,则元素中的 font-size:50%
表示该元素具有 font-size
6px
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
您要使用的是视口百分比: vw
例如:字体大小: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>
这篇关于如何使字体大小相对于父div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!