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

Question

我希望我的div中的文本与%父div 保持相同的百分比.IE我希望我的文本有font-size50%的父母div宽度.因此,当页面大小发生变化时,文本始终保持相同的大小%.

这就是我在说的:

.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

您可以使用容器查询单位：cqw, cqh, cqi, cqb, cqmin, cqmax。所有现代浏览器都支持它们。

这不仅允许调整font-size直接父级的属性，还允许调整定义为容器的任何祖先的属性，并且如果需要，不仅可以调整容器的水平尺寸，还可以调整容器的垂直尺寸。

.container {
  /* Define a container */
  /* Use `inline-size` instead of `size` if you are only
     interested in inline size, which is horizontal
     for Latin and many other layouts. */
  container-type: size;
  
  /* Other styles */
  height: 3em;
  border: solid 2px;
  overflow: hidden;
}

.horizontal {
  resize: horizontal;
}

.vertical {
  resize: vertical;
}

.both {
  resize: both;
}

.horizontal .child {
  font-size: 10cqw;
}

.vertical .child {
  font-size: 30cqh;
}

.both .child {
  font-size: 30cqmin;
}

<div class="container horizontal">
  <div class="child">Resize me horizontally!</div>
</div>

<div class="container vertical">
  <div class="child">Resize<br>me<br>vertically!</div>
</div>

<div class="container both">
  <div class="child">Resize me<br>in all<br>ways!</div>
</div>

Answer 2

CSS 中没有办法实现这个问题所要求的。字体大小只能通过一定数量的方式设置，任何百分比值的设置都是相对于字体大小的，而不是相对于块的宽度或高度。

因此，虽然这并不能解决您的问题，但它回答了是否可以在 CSS 中完成此操作的问题：它不能。

这里有很多答案似乎回答了错误的问题，并建议使用单位vw，该单位相对于视口而不是父元素的大小。还有一些使用 Javascript，如果你不介意的话，这是可行的。然后是slaviboy的答案，它提倡使用CSS用户变量，这是一个我欣赏的创造性解决方案，尽管它无法达到OP要求的最终效果。

在许多情况下，当您想要相对于父元素的宽度设置字体大小时，您有足够的信息能够通过一些数学来完成此操作：弄清楚父元素的宽度是如何计算的，并看看是否可以重复使用像字体大小设置中的计算一样。

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

Answer 3

如果您谈论响应式缩放，那么您可以实现它，但这一切都取决于您想要实现的目标。在下面的代码中，我创建了一个具有比例（高度/宽度 = 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>

Answer 4

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

我正在使用React：

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

CSS：

div {
  font-size: 2em;
}