Example of how rem is adapted for mobile devices

Preface

Review and summary of mobile terminal rem adaptation solutions

How to use rem

The calculation of the rem unit refers to the font-size of the root node of HTML. When the font of the root node changes, the rem page referenced by the layout will also be scaled accordingly. This is the essence of rem layout.

1. Dynamically change the font-size value of HTML

Almost every browser initializes the font-size of HTML to 16px. If we want to change it dynamically, we can temporarily set 16px as the initial value of the root node font-size adapted by rem.

So how to adapt dynamic modification?

Assuming the width of the design is 750px, we define ourselves to use the unit of 1rem = 16px for layout, how to adapt it?

The width of the iPhone simulator on Chrome is 375px, which is exactly half of the design draft. We can do mental calculation: 1rem at that time should be equal to half of the font-size of the HTML node at the time of initialization, that is, newFontSize = 16/2 = 8px. Isn't it adapted to half and half?

From this we get the formula design draft width/16px = device width to be adapted/8px. It can be seen that the new font-size is proportionally scaled based on the current device width and the width of the original design draft.

Finally, newFontSize = 16px * device width to be adapted / original design width

(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. Actual use

Convert the measured btn button styles 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; */
}

The calculation is too cumbersome. Use scss to define functions instead of the calculation process.

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

Then the above css is rewritten as:

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

Supplement: vscode's plug-in cssrem supports calculation to convert the px we enter in css, scss into rem units. The default font-size is set to 16px

Calculation method changes, mental arithmetic rem

1. Simple analysis

Analyzing the previous section, we finally get newFontSize = 16px * device width to be adapted / original design width

It is very cumbersome to divide by 16 every time we calculate. If we change the initial HTML root node font-size to be easier to calculate, since it will eventually serve as a divisor, what value should it become? Is 100 more convenient? That’s right!

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

2. Actual use

Still using the familiar btn above, convert px to rem and calculate the result mentally.

.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, it is really convenient to have scss!

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

Then the above CSS function method is rewritten as:

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

How about it, rem turns out to be that simple! ! !

Utility Functions

You can choose either of the above methods. After all, JavaScript's execution efficiency 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 full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.