思路：用js计算并设置出该网页宽度对应的html的font-size大小（对应设计稿该宽度的大小）。在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度（我的一般参考375px），maxWidth是设计稿的最大网页宽度，一般为750。运行该函数后，将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px，css为font-size:10rem。
除此之外，在网页代码的头部，加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
//设置html的font-size function resizeRem(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; } //要等 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); } } 标签：maxWidth,doc,h5,字体,rem,font,refreshRem,size From： https://www.cnblogs.com/the-big-dipper/p/17125876.html