(十九)前端中使用amfe-flexible和postcss-p
2019-04-05 本文已影响0人
我拥抱着我的未来
(一) 本节知识点
在vue项目中使用rem适配
(二) 第一步安装
利用安装
npm install amfe-flexible -S
npm install postcss-px2rem -S
postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值
(三) 第二步引入 lib-flexible
在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";
这里特别注意的就是
注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
(四) 配置postcss-px2rem
(1) vuecli3 配置
px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
postcss-pxtorem 在postcss.config.js中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
}
(2) vuecli2 配置
找到根目录下.postcssrc.js文件
然后里面写
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
// to edit target browsers: use "browserslist" field in package.json
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*', '!border*']
}
}
}
propList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem
(五) 使用方法
按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了
(六)不想匹配，也就是不想把px变为rem,可以这样
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}
