Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve adaptive html font size, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

In the process of development, there is a need to set the adaptive font size according to the width and height of the interface dom. Now share the development ideas.

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

I used angularjs to develop here, so I posted the instructions for reference.

* *. Directive ("doCalculateFontsize", ['$timeout',function ($timeout) {/ * * Universal font size adaptation) The realization of * * / return function (scope, element, attr) {attr.$observe ("doCalculateFontsize", function (interpolatedValue) {if (undefined defined values) = "") {var maxwidth = parseInt (attr.domMaxWidth) by calculating whether the width and height of the dom element exceeds the bounds while changing the font size 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

= 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 hide the dom element before the font size is added, and then set the dom element to be visible after the required font size has been obtained. During the local test, I did not find any anomalies such as interface flicker. For example, when the interface needs to deal with too many elements or needs to refresh data regularly, we may need to consider the performance of the page.

It should be noted that in css, you need to set the style of the dom element. For example, you may need to set the content without line wrapping, content overflow, box-sizing, etc., and set it according to the actual situation.

If you need to set multiple dom adaptive font sizes, you can also use this idea to handle

The above is all the content of the article "how to achieve adaptive font size in html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.