html adaptive font size

This article mainly introduces the HTML adaptive font size, which has certain reference value. Now I share it with everyone. Friends in need can refer to it.

In the development process, there are situations where you need to adjust the font size according to the interface dom. The width and height are used to set the adaptive font size. Now we will share the development ideas

When the width and height of the page dom element are limited, it is impossible to set the same font size for all elements, and the font size is If the setting is too small, it is not conducive to the beauty of the interface, so my development idea is to use JS to dynamically control the font size in the dom, that is, obtain the width and height of the dom through JS, and then accumulate the font size from 12px until the font size can adapt to the dom. Until the width and height, the final font size obtained is the required font size

I developed it using angularjs, so I will post the written instructions for reference

***.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");
            }
        })
    };
}])

Here I am adding up the font size Hidden the DOM element before, and then set the DOM element to be visible after the required font size has been obtained. During local testing, no abnormalities such as interface flickering were found. If the interface needs to process too many elements or needs to refresh data regularly, it may be necessary. Considering the performance issues of the page

It should be noted that some settings need to be made on the style of the dom element in css. For example, you may need to set the content to not wrap, content overflow, box-sizing, etc., and set it yourself according to the actual situation.

If you need to set multiple DOM adaptive font sizes, you can also use this idea to deal with it

Related recommendations:

HTML hyperlinks explained in detail

The above is the detailed content of html adaptive font size. For more information, please follow other related articles on the PHP Chinese website!