我希望我的div中的文字与父级div的%百分比保持相同的大小。
I.E.我希望我的文本有50％父母div宽度的font-size。因此，当页面大小发生变化时，文本在%中始终保持相同的大小。
这就是我所说的：
.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边框内部。我怎样才能防止它发生，所以它总是留在边界内？
答案 0 :(得分：4)
我解决这个问题的方法是使用javascript来测量容器，然后在px上设置该容器的字体大小。为容器设置基线后，所有内容的相对字体大小将使用em或％正确缩放。
我正在使用React：
<div style={{ fontSize: width / 12 }} >
...
</div>
CSS：
div {
font-size: 2em;
}
答案 1 :(得分：1)
如果您谈论响应式缩放，则可以实现它，但是这完全取决于您要实现的目标。在下面的代码中，我创建了一个比例为（height / width = 1/2）的div容器。当您更改浏览器窗口的大小时，容器和文本将响应缩放，根据窗口大小，它将根据VW（视口宽度）和VH（视口高度）更改字体。要添加新的字体大小，您必须根据-vw设置两次，并根据-vh设置第二次。我已经使用CSS变量（var），这样它更容易理解代码。
示例
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>
答案 2 :(得分：0)
自适应字体大小/根据浏览器窗口响应的文本：-
可以使用vw单位设置文本大小，这表示“视口宽度”。
这样，文本大小将遵循浏览器窗口的大小：
例如
<div>
<h2 style="font-size:10vw;">Ganesh Pandey</h2>
</div>
调整浏览器窗口的大小以查看文本大小的缩放比例。
答案 3 :(得分：0)
没有办法实现这个问题在 CSS 中的要求。字体大小只能通过一定数量的方式设置，任何百分比值的设置都是相对于字体大小的，而不是块的宽度或高度。
因此，虽然这不能解决您的问题，但它可以回答是否可以在 CSS 中完成的问题：不能。
这里有很多答案似乎回答了错误的问题，建议使用 vw 单位，它是相对于视口而不是父元素的大小。还有一些求助于 Javascript，如果你不介意那种事情，这是可行的。然后是 slaviboy 的答案，它提倡使用 CSS 用户变量，这是我钦佩的创造性解决方案，即使它无法达到 OP 要求的最终效果。
在很多情况下，当你想设置相对于父元素宽度的字体大小时，你有足够的信息可以用一些数学来做到这一点：计算父元素的宽度是如何计算的，看看你是否可以在您的字体大小设置中重复使用类似的计算。
例如，如果父元素的宽度是视口宽度或其已知百分比，则基于 vw 的答案将起作用，您只需进行数学计算即可得出正确的比例。如果父元素的宽度是某个绝对值，例如 500px，那就更容易了。只有当父元素的宽度完全不可预测时，这才会很困难，尽管大概 OP 的情况就是这样。例如，如果父元素的宽度基于内容，并且内容可能是用户提交的，或者其大小是不可预测的。
答案 4 :(得分：-1)
您可以使用视口单元调整窗口大小。
100vw是完整的窗口宽度，100vh - 高度。
.resizable-text {
font-size: 50vw;
}<div class="resizable-text">
Text
</div>
答案 5 :(得分：-1)
我发现这很好用，而且它的优点是简单：
font-size: min(3vh,1.7vw);
只需根据您的字体调整比例即可。
这是有效的，因为它将视口的较短边作为字体大小的限制因素。
您也可以在父 div 上设置它，然后在其子级中使用 em 单位引用它。
喜欢
.parent{
font-size: min(3vh,1.7vw);
}
.child {
font-size: 2.2em;
}<div class="parent">
<div class="child">
<p>Hello there</p>
</div>
</div>答案 6 :(得分：-4)
使用font-size: x%与父级的宽度无关，但与元素通常具有的字体大小无关。
因此，如果您的元素的父级设置font-size: 12px，则元素中的font-size: 50%表示该元素的font-size为6px
您要使用的是viewport percentage：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>