html如何實(shí)現(xiàn)自適應(yīng)字號

小編給大家分享一下html如何實(shí)現(xiàn)自適應(yīng)字號，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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

***.directive("doCalculateFontsize",['$timeout',function ($timeout) {
    /*
    *   通用的字體大小自適應(yīng)，通過在改變字體大小的同時計(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");
            }
        })
    };
}])

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

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

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

以上是“html如何實(shí)現(xiàn)自適應(yīng)字號”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！