html自適應(yīng)字號(hào)

在開發(fā)過(guò)程中有遇到需要根據(jù)界面dom的寬高來(lái)設(shè)置自適應(yīng)字號(hào)大小，現(xiàn)將開發(fā)思路分享

在頁(yè)面dom元素的寬和高都有限制的情況下，無(wú)法為所有的元素設(shè)置同樣的字號(hào)大小，而將字號(hào)設(shè)置過(guò)小又不利于界面美觀，所以我開發(fā)的思路是通過(guò)JS來(lái)動(dòng)態(tài)控制dom中的字號(hào)大小，即通過(guò)JS獲取dom的寬度和高度，再將字號(hào)從12px開始累加，直到字號(hào)可以適應(yīng)dom的寬高為止，最后得到的字號(hào)即為需要的字號(hào)

這里我是使用angularjs開發(fā)的，故將編寫的指令貼出來(lái)以供參考

***.directive("doCalculateFontsize",['$timeout',function ($timeout) {
    /*
    *   通用的字體大小自適應(yīng)，通過(guò)在改變字體大小的同時(shí)計(jì)算dom元素的寬高是否超界實(shí)現(xiàn)
    * */
    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");
            }
        })
    };
}])

這里我是在字號(hào)累加之前將dom元素隱藏，在已經(jīng)取得需要的字號(hào)以后再將dom元素設(shè)置可見，在本地測(cè)試時(shí)未發(fā)現(xiàn)有界面閃爍等異常，如界面需要處理的元素過(guò)多或者需要作定時(shí)刷新數(shù)據(jù)時(shí)，可能需要考慮頁(yè)面的性能問(wèn)題

需要注意的是，在css中需要對(duì)dom元素的樣式做一些設(shè)置，如可能需要設(shè)置內(nèi)容不換行、內(nèi)容溢出、box-sizing等，根據(jù)實(shí)際情況自行設(shè)置

如果需要設(shè)置多個(gè)dom自適應(yīng)字號(hào)時(shí)，也可以使用這個(gè)思路處理

相關(guān)推薦：

HTML 超級(jí)鏈接詳細(xì)講解

以上就是html自適應(yīng)字號(hào)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！