HTMLの適応フォントサイズ

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

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

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

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

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

***.directive("doCalculateFontsize",['$timeout',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 ハイパーリンクの詳細説明

以上がHTMLの適応フォントサイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。