Introduction to mobile web screen adaptation (rem)

This article mainly introduces mobile web screen adaptation (rem). It introduces the mobile web screen adaptation (rem) in detail. The content is quite good. I will share it with you now and give it as a reference.

Preface

Recently I sorted out my notes from previous front-end studies and found that I have no experience with mobile web screen adaptation (rem). I don’t really understand it, I just know how to use it.

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

rem Introduction

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

rem adapts to the mobile web

Adaptation effect

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

Code

// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + &#39;px&#39;;
  })()
</script>

// 在 less 中
/* 定义变量@r：750/15 */
@r:50rem; 
p {
  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 to the rem unit.

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

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

So, 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 measured width of p is 100px, because in a screen with the size of the design draft, 1rem = 50px, so the rem value of p is: 100/50 rem, that is, 100/@r.

The height of p is measured to be 200px, because in a screen with the size of the design draft, 1rem = 50px, so the rem value of p 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. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of the rel attribute in HTML

The role of meta in the html page and the cache of the page Parsing with no cache setting

#

The above is the detailed content of Introduction to mobile web screen adaptation (rem). For more information, please follow other related articles on the PHP Chinese website!