ホームページ > 記事 > ウェブフロントエンド > HTMLの適応フォントサイズ

HTMLの適応フォントサイズ

不言オリジナル: 2018-05-03 14:24:451960ブラウズ

この記事では主に HTML の適応フォントサイズを紹介します。これは、必要な友人に参考にしていただけるようになりました。

インターフェイス dom の幅と高さをフォントサイズに適応させるために、開発アイデアを共有します

ページ dom 要素の幅と高さが制限されている場合、すべての要素に同じフォントサイズを設定することは不可能です。フォントサイズを小さくしすぎるとインターフェイスの美しさが損なわれるため、私が開発したアイデアは、JS を介して dom 内のフォントサイズを動的に制御することです。つまり、JS を介して dom の幅と高さを取得することです。そして、フォントサイズが dom の幅と高さに適応できるまで、フォントサイズを 12 ピクセルから累積していきます。最終的なフォントサイズは、必要なフォントサイズです

ここでは angularjs を使用して開発したため、参考のために書かれた手順を投稿しました

***.directive("doCalculateFontsize",[&#39;$timeout&#39;,function ($timeout) {
    /*
    *   通用的字体大小自适应，通过在改变字体大小的同时计算dom元素的宽高是否超界实现
    * */
    return function(scope, element, attr) {
        attr.$observe("doCalculateFontsize",function (interpolatedValue) {
            if(interpolatedValue!=undefined&&interpolatedValue!="") {
                var maxwidth = parseInt(attr.domMaxWidth);
                var maxheight = parseInt(attr.domMaxHeight);
                var th = parseInt(attr.domTotalHeight);
                var text = attr.doCalculateFontsize;
                var nowsize = 12;
                var maxsize = 200;
                angular.element(element).css("visibility", "hidden").html(text).css("font-size", nowsize + "px");

                for (; nowsize < maxsize; nowsize++) {
                    var nowwidth = angular.element(element)[0].offsetWidth;
                    var nowheight = angular.element(element)[0].offsetHeight;

                    if (nowwidth >= maxwidth || nowheight >= maxheight) {
                        break;
                    }
                    else {
                        angular.element(element).css("font-size", nowsize + "px").css("marginTop", (th - 0.5 * nowheight) + "px").css("visibility", "visible");
                    }
                }
            }
            else{
                angular.element(element).css("visibility", "visible").html("").css("font-size", "12px");
            }
        })
    };
}])

ここでは、フォントサイズが蓄積される前に dom 要素を非表示にし、必要なフォントサイズが取得された後に dom 要素を設定します。インターフェイスが必要な場合、ローカルテスト中にインターフェイスのちらつきなどの異常は見つからなかったことがわかります。処理する要素が多すぎる場合、またはデータを定期的に更新する必要がある場合は、ページのパフォーマンスを考慮する必要がある場合があります。CSS で要素のスタイルをいくつか変更する必要があることに注意してください。コンテンツを折り返さない、コンテンツのオーバーフロー、ボックスのサイズなどを設定する必要がある場合があります。実際の状況に応じて自分で設定する必要があります

複数の DOM アダプティブフォントサイズを設定する必要がある場合は、このアイデアを使用して対処することもできますそれと一緒に

HTMLの適応フォントサイズ

関連記事