首页 > 编程语言> > javascript-使用CSS / jQuery的自适应字体大小

javascript-使用CSS / jQuery的自适应字体大小

2019-10-10 06:46:18 作者：互联网

我想在div中创建一个响应文本.

我尝试了jquery-textfill和FlowType,但它们根本不适合我.

FlowType不会使用所有可用空间,仅使用其中一部分(demo),而textfill不考虑高度(demo).

我是不正确地使用它们还是我想要的东西很难实现？

我的HTML：

<body>
    <div class="external">
        <div class="internal">Example</div>
    </div>    
</body>

我的CSS：

.internal{width:100%;height:100%}
.external{width:400px;height:50px;}

PS.目前尚不足够支持视口.

解决方法:

编辑：更新了调整大小的事件侦听器.更新了fiddle.

据我了解,您希望文本尽可能大,同时仍适合包含的< div>,对吗？我的解决方案是将< span>文字周围,符合文字的正常大小.然后计算容器的尺寸和< span>的尺寸之间的比率.以较小的比例(宽度或高度)中的较大者为准,使用该比例放大文本.

HTML：

<div class="container">
    <span class="text-fitter">
        text here
    </span>
</div>

JS(jQuery)：

textfit();
$(window).on('resize', textfit);

function textfit() {
    $('.text-fitter').css('font-size', 'medium');
    var w1 = $('.container').width()-10;
    var w2 = $('.text-fitter').width();
    var wRatio = Math.round(w1 / w2 * 10) / 10;

    var h1 = $('.container').height()-10;
    var h2 = $('.text-fitter').height();
    var hRatio = Math.round(h1 / h2 * 10) / 10;

    var constraint = Math.min(wRatio, hRatio);

    $('.text-fitter').css('font-size', constraint + 'em');
}

这是一个fiddle.在CSS中调整.container尺寸以查看其实际效果.

标签：html,javascript,jquery,css,responsive-design
来源： https://codeday.me/bug/20191010/1884950.html