H5移动端适配(rem布局)（弹性布局)

移动端自适应各种手机屏幕分辨率适配方案
采用方案：postcss-plugin-px2rem插件+postcss.config.js+setRem.js

• 安装插件：npm i postcss-plugin-px2rem --save

• 在和src同级目录下创建文件postcss.config.js并添加如下代码：

// 一般postcss建议单独配置在文件postcss.config.js中
// var px2rem = require('postcss-px2rem');
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: 'last 2 versions'
        }),
        require('postcss-plugin-px2rem')({
            remUnit: 75
        })
    ]
}

• 新增文件名为setRem.js的文件并添加如下代码：

/**
 * html根节点设置font-size
 * @param {designwidth} Number 设计稿的宽度
 */
export const setRem = (designwidth) => {
    function fontSizeFun() {
        const fontSize = 100
        const relwidth = document.documentElement.clientWidth
        const relfontSize = fontSize * relwidth / designwidth + 'px'
        document.getElementsByTagName('html')[0].style.fontSize = relfontSize
    }
    fontSizeFun()
    window.onresize = fontSizeFun
}

• 在主入口文件main.js文件下引入setRem.js文件，引入根据自己存放位置写，例：

// setRem布局导入
import {
    setRem
} from './plugins/setRem.js'
setRem('750')

• 设配成功如下图