Use rem to set the text size

Setting the text size with px is not normal, for example

{:;}

It can be seen everywhere that px is used to set width and height, which is also a careful and secure setting method. The disadvantage of this method is that adjusting the browser's text size does not affect the text in pixels, this causes inconvenience to some users.

This problem is corrected by setting the text size with em, which is a relative unit. When the text size is expressed in em, it can be increased (smaller) with the browser font size (for example, "set-> advanced settings-> font size" in chrome ), the format is basically the same as that of px, for example

{:;}

The above p element is used as an example. The em calculation method is as follows:

Using em has a headache:

Assume that the document structure is as follows: html> p> span. The style is as follows:

{
:; Token}
{

Now I want to set the text size of span to 12px, and I need to calculate 12/14 = 85.7%

{
:}

If you want to set the text size of the face node in the span, the calculation will become more and more painful...

This is the time for the emergence of rem.

Rem is introduced in CSS3. rem refers to the text size of the root element (html). IE9 + is supported by mainstream versions such as Firefox, Chrome, Safari, and Opera.

After the text size of the root node is set, the text size of all child nodes is calculated relative to that of the root node. For example, if html is 10px, 1.2rem = 12px, 2rem = 20px... and so on.

{:;}{:;:;}{:;:;}

To be compatible with browsers that do not support rem, write the corresponding px value before setting rem to achieve elegant degradation.