css - 如何使字体大小相对于容器大小

Question

HTML：

<span> text </span>

CSS：

span{
  width: 200px;
  height: 200px;
  display: inline-block;
}

我想让文本适合跨度的大小。所以如果跨度是 200x200，字体应该有 72px 的高度。如果它更小，我的字体大小应该更小。这可能吗？

以百分比设置字体大小似乎没有任何效果。

Answer 1

$(".container").each(function(){ //if container is a class
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});

您可以像这样在 jQuery 中动态调整大小：

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});

Answer 2

我认为使用 em 单位作为高度和字体大小是解决问题的最佳选择。我无法给出确切的代码，但是请阅读此书，这对您未来的设计来说很棒而且更好。

http://www.w3.org/WAI/GL/css2em.htm