我有一个具有 % 宽度和高度的容器，因此它会根据外部因素进行缩放。我希望容器内的字体相对于容器的大小是一个恒定的大小。有什么好的方法可以使用 CSS 做到这一点吗？将font-size: x%根据原来的字体尺寸（这将是100％）将只缩放字体。
如何根据容器大小设置字体大小？
IT技术
javascript
css
font-size
2021-02-04 17:03:22
6个回答
如果要将字体大小设置为视口宽度的百分比，请使用vw单位：
#mydiv { font-size: 5vw; }
另一种选择是使用嵌入在 HTML 中的 SVG。这将只是几行。文本元素的 font-size 属性将被解释为“用户单位”，例如视口是根据其定义的。因此，如果您将视口定义为 0 0 100 100，那么字体大小 1 将是 svg 元素大小的百分之一。
不，没有办法在 CSS 中使用计算来做到这一点。问题是用于字体大小的百分比，包括计算中的百分比，是根据继承的字体大小而不是容器的大小来解释的。bw为此，CSS 可以使用一个名为(box-width)的单位，因此您可以说div { font-size: 5bw; }，但我从未听说过有人提议这样做。
另一个 js 替代方案：
fontsize = function () {
var fontSize = $("#container").width() * 0.10; // 10% of container width
$("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
或者如torazaburo 的回答所述，您可以使用 svg。我整理了一个简单的例子作为概念证明：
<div id="container">
<svg width="100%" height="100%" viewBox="0 0 13 15">
<text x="0" y="13">X</text>
</svg>
</div>
您可以使用 CSS3 使用计算来做到这一点，但使用 JavaScript 很可能更安全。
这是一个例子：http : //jsfiddle.net/8TrTU/
使用 JS，您可以更改文本的高度，然后简单地将相同的计算绑定到调整大小事件，在调整大小期间，以便在用户进行调整时进行缩放，或者您允许调整元素的大小。
我在我的一些项目中使用了Fittext，它看起来是解决此类问题的好方法。
FitText 使字体大小灵活。在您的流畅或响应式布局上使用此插件来实现填充父元素宽度的可扩展标题。
它不能用 css font-size来完成
假设媒体查询可以获取您所指的“外部因素”，您可以使用它们 - 调整可能必须限于一组预定义的大小。
其它你可能感兴趣的问题