Question

HTML：

<span> text </span>

CSS：

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

我想让文字符合跨度的大小。因此，如果跨度为200x200，则字体应具有72px高度。如果它更小，font-size应该更小。这可能吗？

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

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

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

2 个答案: