移动端开发自适应方案(flexible)

最新推荐文章于 2024-09-06 15:42:11 发布

xkkkKA

最新推荐文章于 2024-09-06 15:42:11 发布

阅读量1.1k

点赞数

文章标签： js 移动开发

本文链接：https://blog.csdn.net/m0_46057827/article/details/121649197

版权

引言

我们在日常开移动端页面时，总是要面临用户有各种各样的机型，屏幕大小的不同，会导致我们在开发机型上开发出来的页面，放在其他机型上，页面就会变形或者变得很丑。为了解决这一问题，淘宝开源了一套移动端适配方案: flexible.

使用

普通引入:
1. 在页面中引入源码
```
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
```
1. 根据设计图的尺寸确定基准值，假如设计图为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
      })
    ]
  }
}