vue2.x+vantd rem适配_antdv rem-优快云博客

本文介绍了如何在Vue2.x项目中使用Vant组件时应对默认px单位导致的样式不响应问题，步骤包括安装lib-flexible库、引入并配置postcss-pxtorem，以及针对iPad等特殊设备的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.X + vant 由于vant的css是默认px，所以使用组件的时候样式不能响应，对rem适配

安装lib-flexible （更改为安装amfe-flexible）

npm i lib-flexible --save 
npm i amfe-flexibl --save  （安装这个）同时下面main.js引入也改为引入这个

2.在main.js引入lib-flexible

import 'lib-flexible/flexible'
import "amfe-flexible";（最新）

3.安装postcss-pxtorem

npm install postcss-pxtorem -D

4.配置postcss-pxtorem
在根目录的.postcssrc.js文件中修改
此文件自动生成，若没有，手动添加

module.exports = {
  "plugins": {
    "autoprefixer": {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
      propList: ['*']
    }
  }
}

5.针对ipad 和 ipad pro 设备无效（这个不用了）

// 在index.html中添加如下代码
<script>
    /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

注意：如果报错：[object Object] is not a PostCSS plugin。
原因：postcss-pxtorem版本太高，更改版本为5.1.1
执行命令： npm install postcss-pxtorem@5.1.

此片文章转载：[https://www.jianshu.com/p/5dc9434ad4c0]