h5移动端适配方案-rem

1. rem公式 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配置说明

3. amfe-flexible插件   375px屏幕宽度下html的font-size 37.5。

4.postcss-pxtorem  是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

5.呈现效果

项目中title是16px ,postcss-pxtorem插件中配置的rootValue为37.5   16/37.5 = 0.42667rem  

postcss.config.js

export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};