如何使字体大小相对于父 div？

Question

我希望 div 中的文本与父 div 保持相同的大小 % 百分比。 IE。我希望我的文本具有 font-size 父 div 宽度的 50%。因此，当页面大小发生变化时，%.

中的文本始终保持相同大小

我要说的是：

.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 边框。我怎样才能防止它发生，所以它总是留在边界内？

Answer 1

使用 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>

Answer 2

您可以使用视口单位通过 window 调整大小。 100vw 是全 window 宽度，100vh - 高度。

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

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

Answer 3

我解决这个问题的方法是使用javascript测量容器，然后在该容器上设置以像素为单位的字体大小。一旦为容器设置了该基线，所有内容的相对字体大小将使用 em 或 % 正确缩放。

我正在使用 React：

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

CSS:

div {
  font-size: 2em;
}

Answer 4

如果你谈论响应式缩放，那么你可以实现它，但这一切都取决于你想要实现的目标。在下面的代码中，我创建了一个比例为 (height/width = 1/2) 的 div 容器。当您更改浏览器的大小时 window，容器和文本将在 window 大小上缩放 responsively.Depending 它会根据 VW（视口宽度）和 VH（视口高度）更改字体.要添加新的字体大小，您必须根据 -vw 设置两次，然后根据 -vh 设置第二次。我使用了 CSS variables(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>

Answer 5

自适应字体大小/根据浏览器响应文本 window :-

文字大小可以设置为vw单位，即"viewport width"。

这样文本大小将跟随浏览器的大小 window:

例如

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

调整浏览器大小 window 以查看文本大小如何缩放。

Answer 6

我发现它工作得很好，而且它的优点是简单：

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>

Answer 7

无法实现此问题在 CSS 中的要求。字体大小只能以一定数量的方式设置，任何百分比值的设置都是相对于字体的大小，而不是块的宽度或高度。

因此，虽然这不能为您的问题提供解决方案，但它是对是否可以在 CSS 中完成的问题的答案：它不能。

这里有很多回答好像答错了，推荐使用vw单位，它是相对于视口的大小，而不是父元素的大小。还有一些求助于 Javascript，如果您不介意这种事情，这是可行的。然后是 slaviboy's answer 提倡使用 CSS user variables 这是一个我很欣赏的创造性解决方案，即使它不能达到 OP 要求的最终效果。

在许多情况下，当您想相对于父元素的宽度设置字体大小时，您有足够的信息可以通过一些数学运算来做到这一点：找出父元素的宽度是如何计算的，看看是否您可以在字体大小设置中重复使用类似的计算。

例如，如果父元素的宽度是视口宽度或它的已知百分比，那么基于 vw 的答案将有效，您只需计算出正确的比例即可。如果父元素的宽度是某个绝对值，比如 500px，那就更容易了。只有当父元素的宽度完全不可预测时，这才会很困难，尽管 OP 的情况可能就是这样。例如，如果父元素的宽度基于内容，并且内容可能是用户提交的，或者它的大小是不可预测的。

Answer 8

我不知道这是否有帮助。这也许只是废话。这个想法是手动获取元素的宽度并从中计算 font-size 。我使用了一些 JavaScript 因为我不知道 CSS 变量是否可以进行数学运算。评论中的代码有效但不是动态的。

const resize_ob = new ResizeObserver(function(entries) {

let rect = entries[0].contentRect;

let currWidth = rect.width;    


let fontSize = rect.width / 10;

/*    

let testDiv = document.querySelector("#test_div");
let testDivStyle = getComputedStyle(testDiv);
let testDivRawWidth = testDivStyle.getPropertyValue('width')
let fontSize = parseInt(testDivRawWidth .substring(0, testDivRawWidth .length - 2)) / 10;
*/

testDiv.style.setProperty('--fontSize', fontSize+"px");
})

div {
background-color: lightblue;

height: 75vh;
width: 75vh;

font-size: var(--fontSize, 15vh);

}

<div id="test_div">

testing just a thing...

</div>

如何使字体大小相对于父 div？

How to make font-size relative to parent div?

css

font-size