vue中使用rem插件做适配

为什么要使用rem插件？ 因为每台手机的屏幕大小都不一致，需要通过屏幕大小的不同 来适配各个手机上展示页面的效果，这是需要通过rem插件来 动态的修改。

用了这个插件方便之处在于哪里？ 方便之处在于：设计师给你的移动端设计稿，上面标注了 多少的px，你就直接写多少px就可以了，不需要动脑计算 转化为多少rem。

1、安装两个插件 屏幕自适应插件 npm i amfe-flexible --save 把px转成rem的插件 只能在css文件里面写 <style>里面的npm i postcss-px2rem --save

2、main.js引入 import rem from amfe-flexible 为了全局使用rem 插件需要use一下 Vue.use(rem)

3、package.json中添加如下代码： "remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的 "postcss":{ "plugins":{ "autoprefixer":{}, "postcss-px2rem":{ "remUnit":75 } } }

4、修改了 src路径不需要重启，但是修改了配置项 需要重新启动 npm run serve

5、需要在css中设置样式，在行内样式style里面写无效 .s1{ /* 30px/75=0.4rem */ font-size:30px; }

6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会 效果：页面的尺寸也会根据屏幕的变化而变化

在vuecli4 里面可以按照上面的方法去使用

如果你现在是最新的版本 vuecli5 那么就应该 按照以下步骤： 卸载后postcss-px2rem， 安装使用postcss-pxtorem 新建postcss.config.js 复制如下代码： const autoprefixer = require(autoprefixer); const px2rem = require(postcss-pxtorem); module.exports = { plugins: [autoprefixer(), px2rem({ rootValue: 75, unitPrecision: 5, propList: [*] })], };

把package中的多写的代码删除！【注*：单位可以直接使用px 代替 rem， 无需使用rem】