移动端适配方案

postcss postcss-pxtorem

安装postcss和postcss-pxtorem

"postcss": "^6.0.23",
"postcss-pxtorem": "^5.0.0",

配置.postcssrc.js文件（安装插件未生成此文件时，自己新建，配置很多，可根据项目进行自由配置）

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

utils文件夹下新建rem.js文件

const baseSize = 37.5 //跟.postcssrc.js中rootValue的值是一致的
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小 最高为两倍图 即设计稿为750
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

main.js 中引入 rem.js

import './utils/rem'

使用

<template>
   <div class="page">
    <div class="test"></div>
   </div> 
</template>

.test{
    height: 20px;
    background: red;
    //这里可以根据2倍设计图里面尺寸进行书写即可
    width: 750px;
}

postcss-px-to-viewport

postcss-px-to-viewport，可以将px单位自动转换成viewport单位（vw 表示屏幕的1%）

使用npm安装

npm i postcss-px-to-viewport --save-dev

项目配置：

vue-cli2 vue-cli3 vue-cli4 vue-cli5 每个版本的配置不不一样，可根据自己项目vue-cli版本进行配置，本文只讲vue-cli5配置方式在vue-cli5 是在 vue.config.js 添加如下配置，没有则需要新建文件,配置选项较多，根据需求自行定义

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            [
              'postcss-px-to-viewport',
              {
                unitToConvert: 'px',    // 需要转换的单位，默认为"px"
                viewportWidth: 750,     // 设计稿的视窗宽度
                unitPrecision: 3,       // 单位转换后保留的精度
                propList: ['*'],        // 能转化为 vw 的属性列表
                viewportUnit: 'vw'      // 希望使用的视窗单位
              },
            ],
          ],
        },
      }
    }
  }
})

总结

postcss-px-to-rem 是较早的适配方案，postcss-px-to-viewport是新出的适配方案，大同小异，根据自己项目选择合适的方案进行开发