手机适配问题之rem和lib-flexible

推荐使用viewport方案来解决移动端适配问题。
项目地址:https://github.com/Ewall1106/mall

关于lib-flexible.js

  • Flexible方案是手淘经过多年的摸索和实战,总结出的一套移动端适配方案,附github地址:https://github.com/amfe/lib-flexible。

  • 在说明中,这个作者建议大家开始使用viewport来代替flexible这个方案。

安装配置

  • 安装:
$ npm install lib-flexible --save
安装lib-flexible
  • main.js中引入:
import 'lib-flexible/flexible.js'
main.js
  • viewport设置,我们进入index.html页面中定义meta,该标签定义了用户通过手指放大缩小无效,页面比例始终为1:1

安装插件

  • cssrem插件是一个把px转换为rem的工具-->安装cssrem插件。也可以使用px2rem-loader这个插件。

  • 配置cssrem(以750*1334设计稿为例),因为flexible会将设计稿分成100份(主要是为例以后能更好的兼容vh和vw),而每一份被称为一个单位a;同时1rem单位被认定为10a,我们可以得出:

1a = 7.5px
1rem = 75px
  • 所以我们进入vscode的首选项里面,把把html的font-size设置为75px:
html font-size

你可能感兴趣的:(手机适配问题之rem和lib-flexible)