Mobile phone-side page Adaptive Solution-rem Layout

Just introduce this native JS code to the page.

1234567891011121314151617

(function (doc, win) {       vardocEl = doc.documentElement,           resizeEvt = ‘orientationchange‘in window ? ‘orientationchange‘: ‘resize‘,           recalc = function () {               varclientWidth = docEl.clientWidth;               if (!clientWidth) return;               if(clientWidth>=640){                   docEl.style.fontSize = ‘100px‘;               }else{                   docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;               }           };       if (!doc.addEventListener) return;       win.addEventListener(resizeEvt, recalc, false);       doc.addEventListener(‘DOMContentLoaded‘, recalc, false);   })(document, window);

How do I use it?

This is the core code of the REM layout, the main idea of this code is:
If the width of the page is more than 640px, then the HTML in the page Font-size constant 100px, otherwise, the size of the HTML font-size in the page is: 100 * (Current page width/640)

Why is 640px?

The design diagram is generally 640px, so the equivalent of 100px = 1rem, can be easily calculated;

Because it is 640px, the size of the page should be limited, so the outermost box should be:

12345

position: relative;width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;

Mobile phone-side page Adaptive Solution-rem Layout