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

This article mainly introduces "how to use rem in css3". In daily operation, I believe many people have doubts about how to use rem in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use rem in css3". Next, please follow the editor to study!

The rem in css3 is a relative unit, the unit of font size relative to the root element; the advantage of using rem is that when calculating the dimensions associated with child elements, you only need to calculate the font size of the html element.

This article operating environment: windows7 system, CSS3 version, Dell G3 computer.

What does rem mean in css3?

Detailed explanation of rem in css3

Rem: is a relative unit, relative to the font size of the root element, and the straightforward point is the unit of font size relative to the html element.

Advantage: in this way, when calculating the dimensions related to the child elements, you only need to calculate according to the font size of the html element. Unlike when using em, the frequent calculation of the font size of the parent element back and forth is inseparable from the calculator.

I have just finished a mobile project and I have some small gains to share here. Maybe you have already used it. If there is anything wrong, you are welcome to discuss.

The reason why the font size of html is set to font-size:62.5%: the default font size of the browser is 16pxrem and the relationship between rem and px is: 1rem = 10pxrem 10Accord 16' 0.625' 62.5%. This is the most appropriate way to calculate the dimensions related to sub-elements. As long as the px size measured in the design draft is divided by 10, the corresponding rem size is obtained, which is very convenient. Of course, it is also possible to directly set the html element to 10px. I'm just used to 62.5%. A reference picture is found for easy reference. As follows:

Tell me about the problems encountered in the project.

According to the custom, the code is as follows:

Html {font-size:62.5%;} .menu {width:100%; height:8.8rem; background:#000; line-height:8.8rem;color:#fff;font-size:3.2rem; text-align:center;}

Debugging tool: chrome

The dimensions of the effect drawings are as follows:

Shouldn't the height be 88? why is it so much bigger? chrome is treated as 12px when the font is smaller than 12px, this pit. 8.8 million 8.8 million 881 million 105.59, the result of calculation x = 11.999, there will be errors in browser calculation, which is just 12px.

Bypass this pit and directly set the html font size to 625%, that is, 100px. Let's see how it works again.

Lovely 88 is back, bypassing chrome's 12px loophole.

Equipment adaptation:

Very simple, this project design draft is 640, directly take 640 as a reference, the html font is set to 625%. 88px can be directly converted to .88rem; suitable for devices of other sizes, for example, the element of 3208,88px should be 44px. If you calculate the size of the element directly, there is no point in introducing rem. You can directly query with media and set the font size of html to 312.5%. You only need to write one set of elements. A set of design manuscripts, suitable for n-size equipment, as cool as possible. Calculation method: 320max 640mm 625% 312.5%, other sizes can be changed directly from 320 to the corresponding size.

At this point, the study on "how to use rem in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.