Question

当我调整窗口对角线时，我的html中有7个id为1到7的div，然后fittextjs插件调整7个div中的文本大小。

当我将窗口水平调整大小时，字体大小会减少/增加...

无法正常工作如预期的那样：当我仅调整窗口大小垂直时，字体大小不会减小/缩小。

如何让它适用于最后一个非工作案例？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>FitText</title>

    <style type="text/css">
        body, html {
    width: 100%;
    height: 100%;   
    font-family: arial;
    /*overflow: hidden;*/
}

* { /* Every element which has a border or padding value puts this value inside the div */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

._Z {
    width: 12.50%;
}

.Stack {
    display: table;
    height: 100%;
    float: left;
}

    .Stack li {
        list-style: none;
        display: table-row;
    }

        .Stack li div {
            display: table-cell;
        }

.horizontal-right {
    text-align: right;
}

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

#responseView {
    height: 100%;
}   
    </style>

    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
        <div style="height: 100%;"> 
           <ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">

             <li style="height:14.2%;background: green; color: black;">
                    <div id="div1" style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">1</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div2"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">2</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div3"  style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
                </li>
             <li style="height:14.2%;background: green; color: black;">
                    <div id="div4"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">4</div>
                </li>
                <li style="height:14.2%;background: yellow; color: black;">
                    <div id="div5"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">5</div>
                </li>
              <li style="height:14.2%;background: orange; color: black;">
                    <div id="div6"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">6</div>
                </li>
              <li style="height:14.2%;background: green; color: black;">
                    <div id="div7"  style="border-bottom:white solid 1px;"  class="horizontal-center vertical-center">7</div>
                </li>

            </ul> 

        </div>       
   </div>   

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jquery.fittext.js"></script>
    <script type="text/javascript"> 
        $("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
        $("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
    </script>

</body>
</html>

Answer 1

为了让它像这样工作，你应该在脚本中调整它们的缩放器功能...设置根据高度而不是宽度来测量字体大小。

$this.css('font-size', Math.max(Math.min($this.height() / (compressor*2), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));

应该让它在高度上工作..

干杯！

仅当浏览器窗口HEIGHT更改时，FitTextJS插件不会调整文本大小

1 个答案: