Example of method for REM to adapt to mobile devices

preface

Review and summary of mobile REM adaptation scheme

How to use rem

The calculation of REM unit refers to the font size of the root node of HTML. If the font of the root node changes, the REM page referenced by the layout will be scaled accordingly, which is the essence of REM layout.

1. Change the font size value of HTML dynamically

Almost every browser initializes the font size of HTML to 16px. If we change it dynamically, we can temporarily set 16px as the initial value of the root node font size for REM adaptation.

So how to make dynamic adaptation modification?

Assuming that the width of the design draft is 750px, we define that we use the unit of 1rem = 16px to layout. How to fit it?

In chrome, the width of iPhone simulator is 375px, which is exactly half of the design draft. We can calculate it by mouth: at that time, 1rem should be equal to half of the font size of HTML node in initialization, that is, newfontsize = 16 / 2 = 8px, so half to half is not suitable

From the formula design draft width / 16px = the width of the equipment to be adapted / 8px, it can be seen that the new font size is scaled by referring to the width of the current equipment and the original design draft

Finally, newfontsize = 16px * the width of the equipment to be adapted / the width of the original design draft is obtained

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

2. Practical use

Convert the measured BTN button style from PX to rem

.btn {
  width: 699px; /* 699/16 => 43.6875rem; */
  height: 90px; /* 90/16px => 5.625rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/16=> 0.375rem; */
}

It is too cumbersome to use SCSS to define functions instead of calculation process

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

Then the CSS above is rewritten as follows:

.btn {
  width: pxToRem(699);
  height:pxToRem(90);
  background: rgba(90, 173, 246, 1);
  border-radius:pxToRem(6);
}

Add: the plug-in cssrem of vscode supports calculation, converting the PX we input in CSS and SCSS into REM units, and the default font size is 16px

The calculation method was deformed and REM was calculated by mouth

1. Simple analysis

After analyzing the previous section, we finally get the width of the equipment / the original design draft for newfontsize = 16px *

It is cumbersome to divide each calculation by 16. If we change the initial HTML root node font size into a convenient calculation, anyway, how much will it become as a divisor? Is 100 more convenient? by the way!

const oHtml = document.documentElement;
const clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
//Mobile devices
oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

2. Practical use

Or the familiar BTN, convert PX to REM, and calculate the result by mouth.

.btn {
  width: 699px; /* 699/100 => 6.99rem; */
  height: 90px; /* 90/100 => 0.9rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/100=> 0.06rem; */
}

I have to say, with SCSS is really convenient!

@function reduced100($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

Then the CSS function method above is rewritten as follows:

.btn {
  width: reduced100(699);
  height:reduced100(90);
  background: rgba(90, 173, 246, 1);
  border-radius:reduced100(6);
}

How, REM is so simple!!!

Tool function

You can choose one of the above methods. After all, the execution efficiency of JavaScript is not bad now!

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.