关于vue利用postcss-pxtorem进行移动端适配的问题

来自 https://www.jb51.net/article/174637.htm 侵删

 

1.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装即可，不需要另外进行配置，此插件是对px进行转换。

2.新建一个rem.js的文件，输入以下代码即可，然后在main.js中引用。

const baseSize = 192;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  // const scale = document.documentElement.clientWidth / 1920
  const scale = document.documentElement.clientHeight / 1920;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 1) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

loaderOptions: {
            postcss: {
                plugins: [
                    pxtorem({
                        rootValue: 192,
                        propList: ["*"]
                    })
                ]
            },
            less: {
                modifyVars: {
                    "font-size-base": "12px"
                },
                javascriptEnabled: true
            }
        }, // css预设器配置项