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

引言

我们在日常开移动端页面时,总是要面临用户有各种各样的机型,屏幕大小的不同,会导致我们在开发机型上开发出来的页面,放在其他机型上,页面就会变形或者变得很丑。为了解决这一问题,淘宝开源了一套移动端适配方案: 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)
  1. 现在就可以编写正常的页面,不需要去管其他的机型,flexible会帮我们自动适配。
  • 包引入(基于Vue)
  1. 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
      })
    ]
  }
}

上一篇:Uni-app postcss-pxtorpx 使用(可以exclude某个文件夹)


下一篇:移动端布局之postcss-px-to-viewport(兼容vant)