Mobile web screen adaptation (rem)

Author：Eve Cole Update Time：2025-03-01 08:16:01

Preface

I recently sorted out my notes from my previous front-end studies and found that I don’t really understand the screen adaptation (rem) aspect of the mobile web, I just know how to use it.

Next, record some of your thoughts on mobile web screen adaptation (rem).

introduction to rem

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

rem adapts to mobile web

Adaptation effect

On screens of different sizes, the size of the same element does not appear to be the same, but the proportion of the screen width they occupy is the same.

code

 // In the head tag of the html file <script type=text/javascript> (function(){ var html = document.documentElement; // Get the screen width (px) var hWidth = html.getBoundingClientRect().width; // Set the font-size of the html tag to hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script>

 // In less/* define variable @r: 750/15 */@r:50rem; div { width: 100/@r; height: 200/@r;}

javascript code

First, we copy 1/15 of the screen size (px) to the font-size attribute of the html tag. At this point, 1/15 px of the screen size (px) equals the size of 1rem on any screen size. That is: on any screen size, as long as the same rem value is set to the element, the element will occupy the same proportion of the screen width on all screen sizes, and the proportion will be the same, and it will adapt to all screen sizes. .

less code

Now you only need to convert the px unit of the element in the design draft into the rem unit.

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

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

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

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

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

The height of the div is measured to be 200px, because in a screen with the size of the design draft, 1rem = 50px, so the rem value of the div is: 200/50 rem, that is, 200/@r.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.