0

ウィンドウを斜めにサイズ変更すると、html に ID 1 から 7 の 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>
4

1 に答える 1

0

そのように機能させるには、スクリプトでサイズ変更機能を微調整する必要があります...幅ではなく高さに基づいてフォントサイズを測定するように設定します。

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

高さに基づいて機能するはずです..

乾杯！

于 2014-08-07T22:21:05.993 に答える