html自适应字号

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

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

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

***.directive( doCalculateFontsize ,[ $timeout ,function ($timeout) { * 通用的字体大小自适应，通过在改变字体大小的同时计算dom元素的宽高是否超界实现 * */ 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元素隐藏，在已经取得需要的字号以后再将dom元素设置可见，在本地测试时未发现有界面闪烁等异常，如界面需要处理的元素过多或者需要作定时刷新数据时，可能需要考虑页面的性能问题

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

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

相关推荐：

HTML 超级链接详细讲解

以上就是html自适应字号的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。