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

This article mainly explains how css makes text resize automatically. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how css makes text resize automatically".

Css, you can use the "font-size" attribute and vw units to automatically resize the text, "font-size" attribute is used to set the font size, vw units can automatically resize according to the width of the viewport, that is, you can automatically resize the text. The syntax is "text element {font-size: numeric vw;}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How css makes text resize automatically

In css, you can use vw units to resize text automatically.

Vw is an attribute of css, similar to px,rem, etc., and belongs to the unit of length. In the browser, 1 vw = width of viewport / 100

According to this feature, vw can help us achieve adaptive layout on the mobile side, which has the advantage of WYSIWYG or even better than rem, because there is no need for additional computing at all.

It is recommended to be used with css preprocessing languages such as sass and less, because they can define variables and functions and are of great help in using vw.

Examples are as follows:

Document p {font-size:5vw;}

Text resizes automatically

Output result:

At this point, I believe you have a deeper understanding of "how css makes the text resize automatically". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.