如何根据容器大小设置字体大小？ [英] how to set font size based on container size?

问题描述

我有一个具有％宽度和高度的容器，因此它取决于外部因素。我想在容器内的字体是一个恒定的大小相对于容器的大小。使用CSS有什么好的方法吗？ font-size：x％只会根据原始字体大小（这将是100％）缩放字体。

I have a container that has a % width and height, so it scales depending on external factors. I would like the font inside the container to be a constant size relative to the size of containers. Is there any good way to do this using CSS? The font-size: x% would only scale the font according to the original font size (which would be 100%).

推荐答案

您可以使用CSS3使用计算，但是它最可能更安全的使用JavaScript。

You may be able to do this with CSS3 using calculations, however it would most likely be safer to use JavaScript.

以下是一个示例： http://jsfiddle.net/8TrTU/

使用JS你可以改变文本的高度，然后简单地绑定这个相同的计算到resize事件，在调整大小时，它缩放，而用户正在进行调整，或者您允许调整元素大小。

Using JS you can change the height of the text, then simply bind this same calculation to a resize event, during resize so it scales while the user is making adjustments, or however you are allowing resizing of your elements.

这篇关于如何根据容器大小设置字体大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！