html自適應字號

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

2、;39;,function($timeout)/*通用的字體大小自適應，通過在轉(zhuǎn)變字體大小的同時計算dom元素的寬高是否超界實現(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"););)這里我是在字號累加之前將dom元素躲藏，在已經(jīng)取得需要的字號以后再將dom元素設(shè)置可見，在本地測試時未發(fā)覺有界面閃耀等異樣，如界面需要處理的元素過多或者需要作定時刷新數(shù)據(jù)時，可能需要考慮頁面的性能問題需要注重的是，在css中需要對dom元素的樣式做一些設(shè)置，如可能需要設(shè)置內(nèi)容