移动端开发自适应方案(flexible)
作者:互联网
引言
我们在日常开移动端页面时,总是要面临用户有各种各样的机型,屏幕大小的不同,会导致我们在开发机型上开发出来的页面,放在其他机型上,页面就会变形或者变得很丑。为了解决这一问题,淘宝开源了一套移动端适配方案: flexible.
使用
- 普通引入:
- 在页面中引入源码
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
- 根据设计图的尺寸确定基准值,假如设计图为750px,flexible内把设计图分为了10份,所以我们设置基准值为75px,在vscode中可以使用cssrem插件设置基准值为75px,在页面中输入75px就会自动转化为1rem.
- 现在就可以编写正常的页面,不需要去管其他的机型,flexible会帮我们自动适配。
- 包引入(基于Vue)
- 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
})
]
}
}
标签:基准值,rootValue,适应,file,flexible,移动,postcss,页面 来源: https://blog.csdn.net/m0_46057827/article/details/121649197