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

This article is about how to use rem and em in web. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. The method of transforming rem into prime value.

The conversion of rem units to pixel size depends on the font size of the root element, that is, the font size of the HTML element, and the font size of the root element multiplied by rem.

For example, the font size of the root element 16px 16px 10rem will be equivalent to 160px, that is, 10rem x font = 160px

2. How to convert em units into pixel values

When using em units, the unit of pixel is the em value multiplied by the font size of the element in em units

Example: if a div has a 18px font size, 10em will be equivalent to 180px, that is, 10 × 18 = 180

Summary of secondary public education in Shenzhen:

Rem and em units are pixel values calculated by the browser based on the font size in your design.

Em units are based on the font size of the elements that use them.

Rem units are based on the font size of the html element.

Em units may be affected by the font size of any inherited parent element

Rem units can inherit font sizes from browser font settings.

Em units should be used based on the font size of the component rather than the font size of the root element.

Use rem when you do not need to use em units and you need to zoom according to the font size of the browser.

Use rem units unless you are sure you need em units, including for font size.

Use rem units in media queries

Do not use em or rem in multi-column layouts-use% instead.

Do not use em or rem, as zooming will inevitably result in breaking layout elements.

It is important to note that:

In the style of reset, you need to first set the initialization size of the html font to 50px, in order to prevent js from being disabled or not loading or executing errors.

In the compatible style reset, you need to set the initialization size of the body font to 16px. This is to make the font size within the body not inherit the 50px of the parent html element, but use the system default 16px.

Thank you for reading! This is the end of the article on "how to use rem and em in web". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.