Without further ado, get right to the code

window.onload = function(){
    /*720 represents the width of the design document given by the designer. 100 is the conversion ratio, write 100 for later purposes, for example, if you measure a width of 100px, write 1rem, 1px=0.01rem, etc. */
    getRem(720.100)};window.onresize = function(){
    getRem(720.100)};function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html") [0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}
Copy the code

The first parameter is the width of the design, and the second parameter is the conversion ratio between PX and REM, usually 100 (because it’s easy to calculate); Of course, it is best to wrap this JS code in a separate JS file and load it before all CSS files are imported. In practice, #box1{height:100px; } #box1{height:1rem; } and so on. 100px = 1rem. 1px = 0.01rem. In a page, all the padding, margin, width, height, etc. related to the size can be written in REM units, so that when mobile phones with different resolutions view the same page, the effect is almost the same

DesignWidth: Specifies the actual width of the design draft. Set this parameter based on site requirements. MaxWidth: Specifies the maximum width of the design draft

Remember to set two parameters at the end of this js section, one is the actual width of the design draft and the other is the maximum width of the production draft. For example, if the design draft is 750 and the maximum width is 750, it is (750,750).

; (function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px; } ';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	// Only after WiewPort is set can refreshRem be executed, otherwise refreshRem will be executed twice;
	refreshRem();

	win.addEventListener("resize".function() {
		clearTimeout(tid); // Prevent execution twice
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow".function(e) {
		if (e.persisted) { // recalculate when the browser backs up
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300); }},false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded".function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750.750);
Copy the code

Written in part:

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}
Copy the code