jquery - 根据 div 宽度调整字体大小

Question

我尝试调整与父 div 相关的字体大小。

看到这个小提琴：http: //jsfiddle.net/hFgMs/

div 的宽度为 100 像素。因此，您键入的文本越多，字体大小应该越小，如果您删除一些字符，大小应该会增加。

到目前为止，这有效，但丑陋得要命。过渡时不时地“跳跃”。

关于如何修复它的任何提示？:-)

score 2 · Accepted Answer

好吧...您可以执行以下操作。

创建一个用户视图之外的 div。将文本放入其中，然后在将文本放入其中时获取其大小。然后你可以看到它的大小并适当地缩小它，而不是做大腿计数......顺便说一句，这是越野车......据我所知，它会像地狱一样跳跃不均匀或偶数。

score 0 · Accepted Answer

看看这里的官方文档，这些是你在 css 中的相对单位。http://www.w3.org/TR/css3-values/#font-relative-lengths

根据您的确切目标，您可能可以对视口测量做一些事情。

score -1 · Accepted Answer

当然，只需使用百分比。

使用百分比而不是像素来定义文本字段中字体的大小。

div{
    font-size:100%;
    -webkit-transition:all 300ms;
}

div:hover{
    font-size:200%;
}

应该使更顺畅。