JS implementa la adaptación rem

1.rem definición

rem es una unidad de longitud relativa. Es una unidad css (unidad de adaptación rem) del valor del tamaño de fuente del elemento raíz (html).

por ejemplo: cuando el tamaño de fuente de la etiqueta html se establece en 16px en la página, 1rem = 16px

html{
    font-size:16px;//根元素字体大小，此时1rem = 16px
}

2. Configure dinámicamente el tamaño de fuente html de acuerdo con el ancho de diferentes dispositivos para realizar la adaptación de rem en diferentes dispositivos

 Por ejemplo: tome el ancho de diseño de 1920px de la computadora como ejemplo, configure el tamaño de fuente del elemento raíz HTML de acuerdo con el ancho real de la pantalla, 1rem es igual a

rem = ancho de pantalla/ancho de borrador de diseño (1920px) *100

Si el ancho de la pantalla es 1920 px, es decir, 1 rem = 100 px, si necesita establecer un tamaño de título div en 20 px, ancho en 200 px y alto en 100 px, entonces

div{
    font-size:0.2rem,
    width:2rem,
    height:1rem
}

De esta manera, bajo diferentes pantallas, el tamaño real de los diferentes elementos DOM es  el ancho de pantalla/1920 , logrando una escala proporcional

implementación del código de adaptación rem:

(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 < 800  && (width = 800);//设置最小宽度
		width > maxWidth && (width = maxWidth);
		var rem = width * 100 / designWidth;//屏幕宽度 / 设计稿宽度 * 100，若为电脑运行，此时rem=100
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'//此时重新定义html根元素大小为1rem，即100px
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			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);
	}
})(1920, maxWidth);//此处传入设计稿宽度及最大宽度

Coloque el código en el archivo js, ​​llámelo en la página o escríbalo directamente en la etiqueta del script de la página index.html.