Vue 移动端页面适配 rem

先安装 postcss-px2rem-exclude 插件

npm install --save postcss-px2rem-exclude 

然后在 main.js 引入封装的适配函数

这里封装的页面适配,是以设计图 750px , fontSize 为 40px 为标准。然后根据不同手机宽度计算各自的 fontSize.

let docEl = document.documentElement;
export function getSize() {
  ...
  docEl.style.fontSize = screenWidth / (750 / 40) + 'px';
}
window.addEventListener('resize', () => {
  getSize();
});

最后还需在项目根目录下新建 .postcssrc.js

让 /node_modules/ 下所有的插件和 src 目录下配置统一。目的主要是让 npm 引入的插件,例如 UI 库和开发中的设计图一致,不会出现样式偏差。

module.exports = {
  'plugins': {
    'autoprefixer': {},
    'postcss-px2rem-exclude': {
      'remUnit': 40,
      'exclude': /node_modules/
    }
  }
}