每个兔子都有一个大国梦
前言
希望，是个好东西，也许是世间最好的东西，期待明天~
1 介绍
常用配置项
rootValue
// 根尺寸,即html
// 1rem = 16px
rootValue: 16
propList
// 属性配置
// 允许所有属性，忽略font-*系列
// border 不转rem
propList：['*', '!font-*', '!border']
selectorBlackList
// 忽略body
// 默认匹配body-*
// 使用正则锁定 body
selectorBlackList: [/^body$/],
unitPrecision
// 精度，保留5位小数
unitPrecision: 5
2 使用
安装
npm install postcss-pxtorem -D
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
// 375px 即100%宽度，写px会自动rem处理
// 如果不想被rem处理，可以使用PX来写
'postcss-pxtorem': {
rootValue: 37.5,
// font-size 保留px
// border 保留px
propList: ['*', '!font-*', '!border'],
// 组件库样式保留px
selectorBlackList: ['el-', 'vant-'],
}
}
}
3 适配
rem.scss
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 16; // iPhone 6尺寸的根元素大小基准值
$vm_design: 750; // 根元素大小使用 vw 单位
// 通过 `postcss-pxtorem` 自动将px转为rem
// 即使用`postcss-pxtorem`，无需再使用 `rem(200px)` 转换
@function pxtorem($px) {
@return ($px / $vm_fontsize) * 1rem;
}
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: ($vm_fontsize / ($vm_design / 2)) * 320px;
}
@media screen and (min-width: 540px) {
font-size: ($vm_fontsize / ($vm_design / 2)) * 540px;
}
}
// body 也增加最大最小宽度限制
// 避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
min-width: 320px;
max-width: 540px;
}
4.注意
1.postcss-pxtorem只负责转换，不负责适配
2.使用rem + vw + @media进行适配
3.rootValue与根大小保持一致
尾声
早一些睡觉，早一些再梦里等你
晚安 ^_^
