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

Posted 2023-03-06

技术标签:

【中文标题】如何使字体大小相对于父 div？【英文标题】：How to make font-size relative to parent div? 【发布时间】：2015-08-22 00:30:41 【问题描述】：

我希望 div 中的文本在 % 与父 div 的百分比中保持相同大小。 IE。我希望我的文本具有父母 div 宽度的 50% 的 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>

全屏运行此 sn-p 并尝试调整页面大小并查看文本大小如何变化并且不适合 div 边框。如何防止它发生，使其始终保持在边界内？

【问题讨论】：

您确定要更改font-size 而不是width？我都做了，没有帮助。以及留下其中一种选择。文本仍在调整大小。 ***.com/q/10292001/2615878 有一个类似的问题，有很多很好的答案。 【参考方案1】：

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

我正在使用 React：

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

CSS：

div 
  font-size: 2em;

【讨论】：

我正在使用 Angular，这对我有帮助能不能加个你用来获取宽度的JS？【参考方案2】：

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

【讨论】：

那是相对于viewport的，不是父元素的。确保你的父尺寸也相对于视口。这样您就可以设置子元素和父元素之间的比例，并且当页面大小发生变化时，两个元素都会保持比例并响应缩放。 @slaviboy 我觉得你上面的例子可能是我的问题的解决方案，但不幸的是我错过了一些东西。我有一个 svg 可以在窗口调整大小时缩放，而一些 div 则没有。我希望它们一起缩放并保持它们的相对位置。我尝试像这样top: calc(var(--container-height) * 5%); 设置top 属性，但没有成功。有没有办法实现这一点？您还可以解释一下，middle 类上的transform 属性的用途是什么？这是我正在尝试做的闪电战.. stackblitz.com/edit/lock-resizing-divs-wsemvn>【参考方案3】：

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

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

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

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

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

【讨论】：

有一种方法可以在纯 css 中做到这一点，但它很冗长。看我的回答【参考方案4】：

不幸的是，在所有从事 CSS 工作的聪明人中，没有人认为根据直接父级的宽度垂直缩放文本或任何东西会有用，但不知何故认为 vw 更有用。特别是，任何依赖vw 的解决方案都要求内容占据浏览器窗口或iframe 的整个宽度（或固定百分比）。

为了在两个body>header>div>p 元素中灵活缩放横幅文本，我试图找到一个纯 css 解决方案，我最终得到了一系列

@media all and (min-width:Wpx)body>headerfont-size:Hrem 语句，

从 W = 130 和 H = .8 开始，对于 W 和 .1 递增 .1 对于 H 和 658@3，分别将宽度四舍五入到最近的像素。

这种安排允许我通过填充div 的另一侧来将两条线偏向一侧，并使用百分比调整p 元素的高度来设置它们的相对大小。如果不需要这样做，只需将文本放入 header 的 p 元素中，然后更改其 font-size 百分比以适应。

我的应用程序的最大主体宽度约为 650 像素，但该序列必须继续以获得更大的宽度。它相当冗长，目前占用 2100 个字符。它适用于 IE9，以及基于 Firefox 和 Chromium 的浏览器。

我尝试使用更大的高度跳跃来减少行数，但是在调整浏览器窗口宽度时它更加明显，没有多少人花时间改变浏览器窗口宽度。如果想要更小的最小尺寸，前几个可能需要更多具有更小增量的语句。

请注意，android 浏览器中的字体往往比 ios 或 Windows 浏览器大 8% 左右，这意味着在后者中刚好适合一行的文本将在 Android 中换行，这真的可以填满标题布局！因此，不要将文本宽度推得太靠近两侧。

您可以通过使用 IE11 查看 https://smallsite-design.com/art/h-support/ 到非常窄的宽度来了解它的工作情况。忽略 IE 中缺少字体平滑的问题，但看看横幅变小了多少，同时仍然保留了两个文本行的相对位置和大小。

【讨论】：

【参考方案5】：

我发现这很好用，而且它的优点是简单：

font-size: min(3vh,1.7vw);

只需根据您的字体调整比例。

之所以有效，是因为它将视口的较短边作为字体大小的限制因素。您还可以在父 div 上设置它，然后在其子 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>

【讨论】：

您可以使用vmin（视口最小）单位而不是min()，这是另一个单位，如vw和vh，但基于宽度中的较短者和视口的高度。我的猜测是因为问题要求不同的东西 - OP想要一个文本字符串，并相对于父元素的宽度调整文本的大小。虽然您可以使用 vw 根据视点宽度调整文本大小，但不能根据父元素宽度进行调整。因此，正如大多数答案所暗示的那样，如果不修改他们的方法，我认为 OP 想要的东西是不可能的。但我认为他们被否决了，因为他们没有提供 OP 想要的东西。【参考方案6】：

您可以使用视口单位来调整窗口大小。 100vw 是整个窗口宽度，100vh - 高度。

.resizable-text 
  font-size: 50vw;

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

【讨论】：

那是相对于视口，而不是父元素。【参考方案7】：

根据浏览器窗口响应的字体大小/文本：-

文字大小可以用vw单位设置，即“视口宽度”。

这样文本大小将跟随浏览器窗口的大小：

举例

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

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

【讨论】：

那个是相对于viewport的，不是父元素的。【参考方案8】：

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

【讨论】：

很好的解释，以前从未听说过vw。 vw 和 vh 不是视口窗口的大小，不是它的父级吗？确实，这个答案不应该被标记为有效！我猜你需要一些 javascript 来调整相对于父级的文本大小，但是视口单元绝对不是实现这一点的方法。完全同意——我无法想象一个真实的例子，当文本大小需要相对于浏览器视口的大小时。当文本大小应该与父块的大小相关时，这种情况更为常见。其中一种解决方案是使用类似于github.com/davatron5000/FitText.js的JavaScript 我有一个非常好的用例 - 我有一个可以由管理员配置的元素，以显示在普通用户的页面上。对于用户来说，这个元素是屏幕的宽度，使用 vw 和 vh 缩放效果很好。我希望管理员对此有一个较小的预览，这可能是页面宽度的某个可变比例，例如 6 个引导列，在中等断点处响应切换到全宽。在这里缩放到封闭框宽度的百分比是理想的。

以上是关于如何使字体大小相对于父 div？的主要内容，如果未能解决你的问题，请参考以下文章

图像没有相对于父 div 正确调整自身大小

CSS：如何设置相对于父高度的图像大小？

移动端布局rem em

pc端web、移动端web的字体大小、颜色、字体样式使用

无论字体系列或字体大小如何，有没有办法使文本垂直居中？

CSS-详解