html自适应字号

来源：动视网责编：小采时间：2020-11-27 15:25:40

html自适应字号

html自适应字号:这篇文章主要介绍了关于html自适应字号，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在开发过程中有遇到需要根据界面dom的宽高来设置自适应字号大小，现将开发思路分享在页面dom元素的宽和高都有的情况下，无法为所有的元素设置同样的

推荐度：

点击下载本文 文档为doc格式

导读html自适应字号:这篇文章主要介绍了关于html自适应字号，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在开发过程中有遇到需要根据界面dom的宽高来设置自适应字号大小，现将开发思路分享在页面dom元素的宽和高都有的情况下，无法为所有的元素设置同样的

这篇文章主要介绍了关于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自适应字号

推荐度：

点击下载本文 文档为doc格式

标签：字体大小字体 html

热门焦点

html自适应字号

html自适应字号

html自适应字号

最新推荐

猜你喜欢

热门推荐