web前端：vue-cli引用vant使用rem自适应

作者:pplok 更新于： 2020-03-15 22:15:53

　　rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

　　目前，除了IE8及更早版本外，所有浏览器均已支持rem。

　　摘要

　　由于需要用到弹出层但是懒得造轮子所以使用vant

　　介绍

　　使用的node包管理器为yarn

　　vue-cli版本4

　　rem计算方式为index.html的js脚本计算

　　安装vant

　　yarnaddvant

　　配置

　　安装babel-plugin-import实现按需加载

　　yarnaddbabel-plugin-import

　　配置babel

　　.babelrc与package.json同级如果没有就创建一个

　　{

　　"plugins":[

　　["import",{

　　"libraryName":"vant",

　　"libraryDirectory":"es",

　　"style":true

　　}]

　　]

　　}

　　安装postcss-pxtorem这个是将px转为rem

　　yarnaddpostcss-pxtorem

　　在package.json配置这个“postcss”默认配置下是存在的直接替换掉就可以

　　"postcss":{

　　"plugins":{

　　"autoprefixer":{

　　"browsers":[

　　"Android>=4.0",

　　"iOS>=7"

　　]

　　},

　　"postcss-pxtorem":{

　　"rootValue":100,//结果为：设计稿元素尺寸/100，比如元素宽750px,最终页面会换算成7.5rem，可以理解为1rem等于多少的px

　　"propList":[

　　"*"

　　]

　　}

　　}

　　},

　　到此位置配置就完成了

　　然后就可以使用官方的引入方式了

　　REM是相对单位，是相对HTML根元素。