vue2+vant2 使用rem进行浏览器适配

海洋之蓝

根据VANT官方说明,需要在项目中安装两个插件即可。

如果需要使用 rem 单位进行适配,推荐使用以下两个工具:

postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

但是昨天在安装使用的时候,出了问题。提示错误,打开项目页面也是空白了。于是百度了下,发现网络上的文章都是抄袭。基本没有解决问题,经过一番折腾后发现是postcss这个插件的版本高了,目前如果不指定版本号安装基本都是安装的是6+以上版本。导致项目不能识别其标识错误!

需要指定其版本号进行安装,如5.1.1
npm i postcss-pxtorem@5.1.1

接着安装lib-flexible

安装完成后,在main.js中引入
import "amfe-flexible"

然后在项目的根目录下新建.postcssrc.js文件(网上很多人说在安装完插件后会自动生成,但是我这里没有。)
然后在其中写入:

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

重启服务,即可看到原本PX单位全部变成了rem单位了!

发现VUE安装完插件依赖后,导致项目无法启动或是启动后空白。基本都是插件的版本过高引起的,注意下!

阅读 530
181 声望
1 粉丝
0 条评论
181 声望
1 粉丝
文章目录
宣传栏