js手机端根据屏幕大小设置rem大小

//根据屏幕大小设置根节点字体大小
//getFontSize（是否返回根节点fontSize大小）
//basic（基准值）
//maxScale（最大缩放比例）
/*
    最好结合postcss-pxtorem插件自动转换px为rem

    安装：
    npm i postcss-pxtorem -D

    修改根目录 .postcssrc.js 文件：
    注意：rootValue和basic（基准值）保持一致
    "postcss-pxtorem": {
        "rootValue": 100,
        "minPixelValue": 2, //如px小于这个值，就不会转换了
        "propList": ["*"], // 如需开启pxToRem模式，请在数组中加入"*"
        "selectorBlackList": [] //如需把css选择器加入黑名单，请在数组中加入对应的前缀，比如"mint-"
    }

    或者修改webpack.dev.conf.js和webpack.prod.conf.js
    test: /\.(css|scss|less)$/,
    use:[
        {
            options:{
                plugins:()=>[
                    require('postcss-pxtorem')({
                        "rootValue": 100,
                        "minPixelValue": 2, //如px小于这个值，就不会转换了
                        "propList": ["*"], // 如需开启pxToRem模式，请在数组中加入"*"
                        "selectorBlackList": [] //如需把css选择器加入黑名单，请在数组中加入对应的前缀，比如"mint-"
                    }),
                ],
            },
        },
        {
            loader: require.resolve('sass-loader'),
        },
    ],
*/
function htmlFontSize(getFontSize, basic, maxScale) {
    var getFontSize = getFontSize || false;
    var basic = basic || 100;
    var maxScale = maxScale || 1.5;

    function change() {
        var oHtml = document.documentElement;
        var iWidth = oHtml.clientWidth;
        var iScale = Math.min(iWidth / 375, maxScale);
        var fontSize = basic * iScale;

        if (!getFontSize) {
            oHtml.style.fontSize = fontSize + 'px';
        } else {
            return fontSize;
        }
    }

    if (!getFontSize) {
        change();
        window.onresize = change;
    } else {
        return change();
    }
}

执行函数htmlFontSize()，会根据当前屏幕大小自动设置根节点的字体大小。以375宽度为标准，最大是1.5倍缩放。如果不依赖插件，在375的手机屏幕下，写成.01rem是1px，写成.1rem是10px，以此类推。如果引入postcss-pxtorem，则按正常px的写法。