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

1、html自適應(yīng)字號(hào)在開發(fā)過程中有碰到需要按照界面dom的寬高來設(shè)置自適應(yīng)字號(hào)大小，現(xiàn)將開發(fā)思路共享在頁面dom元素的寬和高都有限制的狀況下，無法為全部的元素設(shè)置同樣的字號(hào)大小，而將字號(hào)設(shè)置過小又不利于界面美觀，所以我開發(fā)的思路是通過js來動(dòng)態(tài)控制dom中的字號(hào)大小，即通過js獵取dom的寬度和高度，再將字號(hào)從12px開頭累加，直到字號(hào)可以適應(yīng)dom的寬高為止，最后得到的字號(hào)即為需要的字號(hào)這里我是用法angularjs開發(fā)的，故將編寫的命令貼出來以供參考*.directive("docalculatefontsize",&39;$timeout&

2、;39;,function($timeout)/*通用的字體大小自適應(yīng)，通過在轉(zhuǎn)變字體大小的同時(shí)計(jì)算dom元素的寬高是否超界實(shí)現(xiàn)*/returnfunction(scope,element,attr)attr.$observe("docalculatefontsize",function(interpolatedvalue)if(interpolatedvalue!=undefined&&interpolatedvalue!="")varmaxwidth=parseint(attr.domm

3、axwidth);varmaxheight=parseint(attr.dommaxheight);varth=parseint(attr.domtotalheight);vartext=attr.docalculatefontsize;varnowsize=12;varmaxsize=200;angular.element(element).css("visibility","hidden").html(text).css("font-size",nowsize+"p

4、x");for(;nowsize=maxwidth|nowheight>=maxheight)break;elseangular.element(element).css("font-size",nowsize+"px").css("margintop",(th-0.5*nowheight)+"px").css("visibility","visible")

5、;elseangular.element(element).css("visibility","visible").html("").css("font-size","12px"););)這里我是在字號(hào)累加之前將dom元素躲藏，在已經(jīng)取得需要的字號(hào)以后再將dom元素設(shè)置可見，在本地測(cè)試時(shí)未發(fā)覺有界面閃耀等異樣，如界面需要處理的元素過多或者需要作定時(shí)刷新數(shù)據(jù)時(shí)，可能需要考慮頁面的性能問題需要注重的是，在css中需要對(duì)dom元素的樣式做一些設(shè)置，如可能需要設(shè)置內(nèi)容