在开发过程中有遇到需要根据界面dom的宽高来设置自适应字号大小，现将开发思路分享

 

　　在页面dom元素的宽和高都有限制的情况下，无法为所有的元素设置同样的字号大小，而将字号设置过小又不利于界面美观，所以我开发的思路是通过JS来动态控制dom中的字号大小，即通过JS获取dom的宽度和高度，再将字号从12px开始累加，直到字号可以适应dom的宽高为止，最后得到的字号即为需要的字号

 

　　这里我是使用angularjs开发的，故将编写的指令贴出来以供参考

 

　　

 

　　

 

　　***.directive("doCalculateFontsize",['$timeout',function($timeout){

 

　　/*

 

　　*通用的字体大小自适应，通过在改变字体大小的同时计算dom元素的宽高是否超界实现

 

　　**/

 

　　returnfunction(scope,element,attr){

 

　　attr.$observe("doCalculateFontsize",function(interpolatedValue){

 

　　if(interpolatedValue!=undefined&&interpolatedValue!=""){

 

　　varmaxwidth=parseInt(attr.domMaxWidth);

 

　　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+"px");

 

　　for(;nowsize<maxsize;nowsize++){

 

　　varnowwidth=angular.element(element)[0].offsetWidth;

 

　　varnowheight=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元素隐藏，在已经取得需要的字号以后再将dom元素设置可见，在本地测试时未发现有界面闪烁等异常，如界面需要处理的元素过多或者需要作定时刷新数据时，可能需要考虑页面的性能问题

 

　　需要注意的是，在css中需要对dom元素的样式做一些设置，如可能需要设置内容不换行、内容溢出、box-sizing等，根据实际情况自行设置

 

　　如果需要设置多个dom自适应字号时，也可以使用这个思路处理






本文转载自中文网