引言
我们在日常开移动端页面时,总是要面临用户有各种各样的机型,屏幕大小的不同,会导致我们在开发机型上开发出来的页面,放在其他机型上,页面就会变形或者变得很丑。为了解决这一问题,淘宝开源了一套移动端适配方案: flexible.
使用
- 现在就可以编写正常的页面,不需要去管其他的机型,flexible会帮我们自动适配。
- npm下载
npm install lib-flexible --save
2. 在index.js中引入
import 'lib-flexible'
3. 下载 postcss-plugin-px2rem 插件,自动转换rem
npm install postcss-plugin-px2rem --save-dev
4. 配置postcss.config.js, 如果没有该文件,在根目录下创建
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-plugin-px2rem')
module.exports = ({ file }) => {
let rootValue
// vant 37.5 https://github.com/youzan/vant/issues/1181
if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
rootValue = 37.5
} else {
rootValue = 75
}
return {
plugins: [
autoprefixer(),
pxtorem({
rootValue: rootValue,
propList: ['*'],
minPixelValue: 2
})
]
}
}