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

HTML:

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

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

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

您可以在jQuery中动态调整大小，如下所示：

$(".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
});

---

我认为使用em单位来计算高度和字体大小是解决这个问题的最佳选择。我不能给出确切的代码，但请阅读本文，这对您未来的设计来说是非常棒和更好的

---

可能的重复很有趣，但大众的

vw

似乎没有达到我想要的效果。我认为“视口”是页面，而不是容器

$(".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
});

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