快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

html如何实现自适应字号

小编给大家分享一下html如何实现自适应字号,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司专注于企业营销型网站建设、网站重做改版、广南网站定制设计、自适应品牌网站建设、HTML5建站商城系统网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为广南等各大城市提供网站开发制作服务。

在开发过程中有遇到需要根据界面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如何实现自适应字号
转载来于:http://6mz.cn/article/ieecjd.html

其他资讯