VUE_vue脚手架使用vant组件库做移动端项目时的REM适配方法_PostCSS 配置

女爷i 2023-03-03 14:25 34阅读 0赞

移动端项目，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。

### 技术手段： ###

*  把所有px单位改成rem
 *  根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具一起工作，来达到目标。

*  [postcss-pxtorem ][postcss-pxtorem]是一款 postcss 插件，用于将px转化为 rem
 *  它需要设置在开发依赖
 *  [lib-flexible][]用于设置 rem 基准值
 *  它对应的包名不是这个名字。
 *  它需要是生产依赖

### 安装包 ###

**npm i postcss-pxtorem -D  
npm i amfe-flexible**

### 设置postcss ###

修改根目录下的postcss.config.js 文件（如果没有这个文件，可以手动添加一份）

module.exports = { 
      plugins: { 
        'autoprefixer': { },
        'postcss-pxtorem': { 
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }

这一步完成之后，它会把原来样式中的px单位自动转成rem单位。  
如果没有生效，重启一下项目npm run serve。

### 引入flexible ###

在入口文件main.js导入 amfe-flexible

// 它会根据的手机尺寸来调整rem的基准值：html标签上的font-size。
    import 'amfe-flexible'

![在这里插入图片描述][2020073117175638.gif]  
如果报错，请降低版本后重装依赖

"dependencies": { 
      "amfe-flexible": "^2.2.1",
    },
    "devDependencies": { 
      "postcss-pxtorem": "^5.1.1",
    }

[postcss-pxtorem]: https://github.com/cuth/postcss-pxtorem
[lib-flexible]: https://github.com/amfe/lib-flexible
[2020073117175638.gif]: /images/20230208/4993df207d5c487099e8bb606dcbbe2d.png