H5 uses rem mobile terminal adaptation solution

Introduce the role of rem:

When it comes to rem, we must first talk about the adaptation of the mobile terminal: due to the different sizes of mobile devices, the pages on the mobile terminal must be able to adapt to devices of different sizes, that is, page adaptation, so that the pages are visually consistent.
rem: rem is a relative unit of css3, the reference is the font-size value of the root element HMTL , that is, the font-size of html: 10px ; then **1rem = 10px; **The main function of using rem is to adapt Different screens on the mobile terminal correspond to the difference in unit size to achieve compatibility.

First look at the following rem writing example

<!DOCTYPE html>
<html lang="en" style='font-size: 10px;'>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
    
    
      width: 10rem;
      height: 10rem;
      background: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

What is the size of the element box in px? According to the formula, 1rem = the font-size value of html, then 10rem = 10 * (value of html font-size) = 10 * 10 = 100px; so the box size is 100px * 100px;

insert image description here
Knowing how to use rem, how does the mobile terminal adapt? We know that using rem as the unit, the size of the element will be calculated according to the value of the font-size of the root element. If we monitor the size of the window to dynamically set the font-size of the root element, it will not be able to adapt to devices of different sizes. Well, take a look at the following js

(function (doc, win, undefined) {
    
    
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', 
      recalc = function () {
    
    
        var clientWidth = docEl.clientWidth;
        if (clientWidth === undefined) return;
        docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size
      };
    if (doc.addEventListener === undefined) return;
    win.addEventListener(resizeEvt, recalc, false);// 监听窗口改变
    doc.addEventListener('DOMContentLoaded', recalc, false) // 初始HTML加载和解析完成时
  })(document, window);

What does this code mean? That is, when the page is initialized and the window is changed, the font-size value of the root element html is dynamically set according to the size of the window at that time , and then the relative unit rem is used together to achieve an adaptive effect.

The core is this code

 docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size
 // docEl => 是 元素html
 // clientWidth => 是当前窗口的宽度
 // 750 => 是 设计稿的宽度

If the window of our development environment is 750 like the design draft, the font-size value of the current root element is 10px; at this time, we measure the width design draft of an element to be 750px, then we have to write it as 75rem; Conversion (75rem * 10px) will get the correct 750px; the simple point is to divide the width of the design draft element we measured by the font-size value of the root element, which is the value of rem we want to write. Think about it carefully.

Based on our above assumptions, if the window becomes 375px at this time, the font-size of the root element becomes 5px, and the 75rem we set in response will actually be rendered as 75rem* 5px = 375px; the page will also keep zooming at the same time, confirming There is no problem with our dynamic settings, ensuring the consistency of the page