html自適應字號

不言原創: 2018-05-03 14:24:451960瀏覽

這篇文章主要介紹了關於html自適應字號，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

在開發過程中有遇到需要根據介面dom的寬高來設定自適應字號大小，現將開發思路分享

在頁面dom元素的寬和高都有限制的情況下，無法為所有的元素設定同樣的字號大小，而將字號設定太小又不利於介面美觀，所以我發展的想法是透過JS來動態控制dom中的字號大小，也就是透過JS取得dom的寬度和高度，再將字號從12px開始累加，直到字號可以適應dom的寬高為止，最後得到的字號即為需要的字號

這裡我是使用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元素的樣式做一些設置，如可能需要設置內容不換行、內容溢出、box-sizing等，根據實際情況自行設置

如果需要設定多個dom自適應字號時，也可以使用這個想法處理

html自適應字號

相關文章