Example Analysis of screen adaptation rem on Mobile web

This article mainly introduces the example analysis of mobile web screen adaptation rem, which has a certain reference value. Interested friends can refer to it. I hope you will learn a lot after reading this article. Let's take a look at it.

Rem introduction

Rem represents the size of the font-size of the root element (). That is, if the font-size size of the root element is 14px, then 1rem = 14px

Rem adapts to mobile web terminal

Adaptation effect

Under different screen sizes, the size of the same element does not look the same, but they account for the same proportion of screen width.

Code

/ / in the head tag of the html file (function () {var html = document.documentElement; / / get screen width (px) var hWidth = html.getBoundingClientRect (). Width; / / set the font-size size of the html tag to hWidth/15 html.style.fontSize = hWidth/15 + 'px';}) () / in less / * define the variable @ rdocument.documentElement; 750lb 15 * / @ r50remr; p {width: 100Compr Height: 200 prime r;}

Javascript code

First, we copy the 1 px of the screen to the font-size attribute of the html tag. At this point, on a screen of any size, the screen size (px) of 1 to 15 px is equal to the size of 1rem. That is, on any size screen, as long as the element is set to the same value of rem, the element accounts for the same proportion of screen width in all sizes of the screen, and the same proportion adapts to all sizes of the screen.

Less code

Now you just need to convert the px units of the elements in the design draft to rem units.

Therefore, at this time, we can also think of the design draft as a mobile phone screen with a certain size.

In my example, the width of the design draft is 750px.

So, 750 1rem 15 = 50px, that is, in a mobile phone screen the size of a design draft, 1rem = 50px.

Then, in the less code, we define a variable @ r.

The width of p is measured to be 100px, because in a screen of the size of the design draft, 1rem = 50px, so the rem value of p is: 100 rem 50 rem, that is, 100 shock r.

The height of p is measured as 200px, because in a screen of the size of the design draft, 1rem = 50px, so the rem value of the p is: 200 rem, that is, 200 rem.

Thank you for reading this article carefully. I hope the article "sample Analysis of Mobile web screen adaptation rem" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!