为什么要使用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】