Mobile phone-side page Adaptive Solution-rem Layout

Just introduce this native JS code to the page.

(Function (doc, win) {        var docel = doc.documentelement,            resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',            recalc = function () {                var clientwidth = docel.clientwidth;                if (!clientwidth) return;                if (clientwidth>=640) {                    docEl.style.fontSize = ' 100px ';                } else{                    docEl.style.fontSize = * (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:

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

Mobile phone-side page Adaptive Solution-rem Layout