vue移动端适配方案

使用Flexible.js

解决Vue项目移动端适配，可以使用Flexible.js，是一个用于淘宝移动端适配的库，可以根据屏幕宽度动态设置html，body的font-size。

具体方法：

1.在Vue项目中安装2个插件：

（1）为html，body动态添加添加font-size

npm install amfe-flexible

（2）将px转为rem

npm install postcss-pxtorem

2.安装后在main.js中引入amfe-flexiblee

import 'amfe-flexible'

3.配置postcss-pxtorem

可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。示例：在vue.config.js中配置如下：

module.exports = defineConfig({
  //px转rem
  css: {
    loaderOptions:{
      postcss: {
        plugins: [
          require("autoprefixer")(),// 补全css前缀(解决兼容性)
          require('postcss-pxtorem')({
            rootValue({file}){
                return file.indexOf('vant') !==-1 ? 37.5 : 75
            },// 换算基数，一般是设计稿宽度的1/10，这里以750px设计稿为例
            propList: ['*'],//可以从px更改为rem的属性,例如：width height padding...
            unitPrecision: 5 // 单位精度
            // propWhiteList: [], // 白名单属性，[]表示允许转换所有属性
            // propBlackList: [], // 黑名单属性，[]表示不转换任何属性
            // exclude: /(node_module)/, // 匹配不处理的文件
            // selectorBlackList: [], // 要忽略并保留为px的选择器
            // ignoreIdentifier: false, // （boolean/string）忽略单个属性的转换。当传递true时，所有的属性都会被转换，但是class名例外。传递一个正则表达式时，例如 /^body$/ ，只有class名匹配这个正则表达式的属性会被保留
            // replace: true, // （boolean）替换包含REM的规则，而不是添加回退
            // mediaQuery: false, // （boolean）允许在媒体查询中转换px为rem
            // minPixelValue: 0, // 设置要转换的最小像素值(px)，小于此值的属性不会转换

          })
        ]
      }
    }
  }
})