rem 适配

现有的移动web开发案例中，rem适配是目前认可度最高的前端适配方案。rem适配可以根据不同屏幕的宽度，以相同的比例展示页面元素。然而目前的UI设计主流是针对iPhone6屏幕 “物理像素” 宽度750px为基准进行设计的。在还原设计稿的前提下，需要前端开发者自行计算出相应的rem值。为了避免每次使用时都要手动进行计算，可以通过安装postcss-pxtorem插件进行px向rem的转换。

安装插件#

npm install postcss-pxtorem -S

参数配置#

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue : 100,
                        minPixelValue: 2
                    }),
                ]
            }
        }
    },
}

配置项说明#

rootValue：转换基准，如1rem = 100px。
minPixelValue：进行转换最小像素值，默认为0。

如果某些元素样式不想转换为rem单位，那么使用大写的PX或Px单位即可。