html自适应字号

1、html自适应字号在开发过程中有碰到需要按照界面dom的宽高来设置自适应字号大小，现将开发思路共享在页面dom元素的宽和高都有限制的状况下，无法为全部的元素设置同样的字号大小，而将字号设置过小又不利于界面美观，所以我开发的思路是通过js来动态控制dom中的字号大小，即通过js猎取dom的宽度和高度，再将字号从12px开头累加，直到字号可以适应dom的宽高为止，最后得到的字号即为需要的字号这里我是用法angularjs开发的，故将编写的命令贴出来以供参考*.directive("docalculatefontsize",&39;$timeout&

2、;39;,function($timeout)/*通用的字体大小自适应，通过在转变字体大小的同时计算dom元素的宽高是否超界实现*/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元素躲藏，在已经取得需要的字号以后再将dom元素设置可见，在本地测试时未发觉有界面闪耀等异样，如界面需要处理的元素过多或者需要作定时刷新数据时，可能需要考虑页面的性能问题需要注重的是，在css中需要对dom元素的样式做一些设置，如可能需要设置内容