when I was reading the article today, I saw a piece of code that I didn"t quite understand, so I would like to ask for advice here.
article address:
https://www.cnblogs.com/azhai.
Code snippets that you don"t understand:
docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
Why can the above code find the font-size? of the root element? Thank you
look at this code according to the width of the screen to calculate the font size relative to the width of 3200.When the width is 20px, the width is 480. it is 30px. the width is 640. it is 40px
1. What is rem
from the goose factory ISUX team explains that: rem (font size of the root element) is the unit of font size relative to the root element. To put it simply, it is a relative unit. When you look at rem, you must remember that the em unit, em (font size of the element) is the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule depends on the root element and the other depends on the parent element.
so to sum up here, the so-called way to rely on the root element to calculate is to first give the html element a font-size, and then all our rem will calculate
for example:
1
html {font-size:16px;}
then our 1rem here should be calculated like this: 1x16, 16px1rem1; The browser defaults to 16px which may cause trouble and multiple decimal places in rem calculation, so we can also initialize the root element in this way:
html {
font-size=62.5% / / here is 10max 16x100% 10px 62.5%, which is the default 10px font size
}
. After initialization, we will reduce a lot of trouble when we carry out rem calculation.
I don't quite understand this operation. If you want to make the font size of the element 10px, you can directly html {font-size:10px;} , right? Why make it 16px first and then multiply it by 62.5%?
go back to the formula you said.
- this is based on the fact that your design draft is 320, that is, if you press 320 to cut the picture, that is the
1:1 ratio. At this time, the font-size is 20, which is equivalent to giving the font-size of html a default value of 20px .
- so when we enlarge the screen, for example, the screen is 640, then the font-size is now 40.
- based on the rem unit layout, it will be automatically enlarged, for example, if the width of the original design is 50, then the ratio of 640Universe 320 will be multiplied under the screen of 640. Automatically zoom in to 100. Achieve the effect of self-adaptation.