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

This article for you to show rem and em and px and vh and vw and % of the sample analysis, concise and easy to understand content, will definitely make your eyes shine, through the detailed introduction of this article I hope you can gain something.

1. rem and em, px

First of all, let's talk about the relationship between em and px em refers to the font height. The browser defaults to 1em=16px, so 0.75em=12px; we often see font-size written by the root element on the page:65%; so em becomes 16px*62.5=10em; this is the font size displayed on the page is 10px;

So 12px= 1.2 em, 10 px =1em, which means you just divide your original px by 10 and replace it with em.

em's characteristics

em is a relative value that varies depending on the size of the parent element.

But if you nest multiple elements, it's a headache to calculate its size.

In this case, rem appears.

rem differs in that it is relative to the root element and therefore not affected by its parent class

Conclusion: The reason why the front-end industry generally defaults to rem or em is because you can control the root element (or use @media) through js to achieve the effect of adapting font sizes of various resolutions.

1. vh, vw and %

vh vw stands for Viewport Height and Viewport Width, which means Windows.

In many cases, they overlap, and each has its advantages and disadvantages, which is summarized as

When dealing with width, % units are more appropriate. When dealing with heights, vh units are better.

(ps: For example, if you need to locate a paragraph of text in a screen, if you use % it calculates the height of your entire dom, and vh calculates the height of the current screen)

The above is an example analysis of rem and em and px, vh and vw and %. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserves, please pay attention to 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.