CSS 如何使字体大小相对于父 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30693928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make font-size relative to parent div?
提问by Tachi
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-sizeof 50% of parents div width. So when page size is changing, text always remains the same size in %.
我希望我的 div 中的文本与%父 div 的百分比保持相同的大小。IE 我希望我的文本具有font-size父 div 宽度的 50%。因此，当页面大小发生变化时，文本在%.
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?
全屏运行此代码段并尝试调整页面大小并查看文本大小如何变化以及不适合 div 边框。我怎样才能防止它发生，让它始终保持在边界内？
采纳答案by Mathieu David
Using font-size: x%is not relative to the width of the parent but the font-size the element would normally have.
使用font-size: x%与父元素的宽度无关，而是与元素通常具有的字体大小相关。
So if your element's parent sets font-size: 12pxthen font-size: 50%in element means that element has a font-sizeof 6px
所以，如果你的元素的父亲集font-size: 12px，然后font-size: 50%在元素意味着元素具有font-size的6px
What you want to use is viewport percentage: vw
您要使用的是视口百分比：vw
for example: font-size: 2vw
例如： 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>回答by JamieR
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 %.
我解决这个问题的方法是使用javascript来测量容器，然后在该容器上以px为单位设置字体大小。一旦为容器设置了基线，那么所有内容的相对字体大小将使用 em 或 % 正确缩放。
I'm using React:
我正在使用反应：
<div style={{ fontSize: width / 12 }} >
...
</div>
CSS:
CSS：
div {
font-size: 2em;
}
回答by slaviboy
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.
如果您谈论响应式缩放，那么您可以实现它，但这一切都取决于您要实现的目标。在下面的代码中，我创建了一个具有比率（高度/宽度 = 1/2）的 div 容器。当您更改浏览器窗口的大小时，容器和文本将响应缩放。根据窗口大小，它将根据 VW（视口宽度）和 VH（视口高度）更改字体。要添加新的字体大小，您必须根据 -vw 设置两次，根据 -vh 设置第二次。我使用了 CSS 变量（var），这样更容易理解代码。
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>回答by Ganesh Pandey
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".
文本大小可以使用 vw 单位设置，即“视口宽度”。
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.
调整浏览器窗口的大小以查看文本大小的缩放方式。
回答by Tigran
You can use viewport units to resize with the window.
100vwis full window width, and 100vh- height.
您可以使用视口单位来调整窗口大小。
100vw是完整的窗口宽度，和100vh- 高度。
.resizable-text {
font-size: 50vw;
}<div class="resizable-text">
Text
</div>