Mobile phone-side REM adaptation

This time to do a few mobile version of the project, because there is no frame, so use REM to adapt, the following share

The first is a relatively simple code

(function (Win) {
Resizeroot ();
function Resizeroot () {
var wwidth = document.documentElement.clientWidth;
if (Wwidth > 640) wwidth = 640;
else if (Wwidth < wwidth) = 320;
Document.documentElement.style.fontSize = wwidth * 0.0625 + ' px '
}
Window.onresize = Resizeroot
}) (window);

The second Kind

!function (window) {
/* Design Document Width */
var docwidth =;
var doc = window.document,
Docel = doc.documentelement,
resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize '; 　　　　
var Recalc = (function Refreshrem () {
var clientwidth = Docel.getboundingclientrect (). width;
/* 8.55: Less than 320px no longer shrinks, 11.2: larger than 420px no longer magnified */
DocEl.style.fontSize = Math.max (Math.min (clientwidth/docwidth), 11 .2), 8.55) * 5 + ' px ';
return refreshrem;
}) ();
/* Add double screen ID, android 1 */
Docel.setattribute (' DATA-DPR ', Window.navigator.appVersion.match (/iphone/gi)? Window.devi CEPIXELRATIO:1);

if (/IP (hone|od|ad)/.test (window.navigator.userAgent)) {
/* Add iOS Logo */
Doc.documentElement.classList.add (' iOS ');
/* IOS8 above to add hairline style to HTML for special handling */
if (parseint (Window.navigator.appVersion.match (/os (\d+) _ (\d+) _? ( \d+)?/) [1], >= 8)
Doc.documentElement.classList.add (' hairline ');
}
if (!doc.addeventlistener) return;
Window.addeventlistener (Resizeevt, Recalc, false);
Doc.addeventlistener (' domcontentloaded ', Recalc, false);
} (window);

Referring to this second is relatively easy to calculate, design drawing dimensions with px/100 = actual REM "For example 100px = 1rem, 24px=0.24rem"

Mobile phone-side REM adaptation