h5移动端适配方案-rem

1.公式

750px(设计稿总宽)/100px(750下对应的html的fontsize) = document.𝑐𝑙𝑖𝑒𝑛𝑡𝑊𝑖𝑑𝑡ℎ / x   (x:求当前屏幕的html的fontsize)

// 动态计算html的font-size .假设750px设计稿上html的font-size = 100px (1rem).那么对应别的屏幕尺寸，font-size是多少呢
// 750/100 = clientWidth / htmlFontSize
(function (doc, win) {
var docEl = doc.documentElement,
  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    // 这里的750 取决于设计稿的宽度
    if (clientWidth >= 750) {
      docEl.style.fontSize = "100px";
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
  };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

2.vscode插件cssrem配置，方便在项目中直接将px单位转成rem

cssrem配置说明