首页手记 8、手机适配问题之rem和lib-flexible

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

标签：

Html/CSS JavaScript Vue.js

前言：GitHub：https://github.com/Ewall1106/mall

一、关于lib-flexible.js

flexible方案是手淘经过多年的摸索和实战，总结出的一套移动端适配方案，这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配，里面详细的讲解了该方案的使用和原理。

另附github地址：https://github.com/amfe/lib-flexible，在github的readme中，作者建议大家开始使用viewport来代替flexible这个方案，其中我也看了一下抛出了文章链接，有一些postCSS新技术的运用，但人水平有限，如果大家感兴趣，可以用作者推荐的方案代替，

二、项目中使用

1、安装

$ cnpm install lib-flexible --save

2、main.js中引入

import 'lib-flexible/flexible.js'

3、viewport设置
我们进入index.html页面中定义meta，该标签定义了用户通过手指放大缩小无效，页面比例始终为1:1

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">

4、安装cssrem插件
cssrem插件是一个把px转换为rem的工具，GitHub：https://github.com/flashlizi/cssrem
为什么不安装px2rem-loader？
一般很多人都喜欢使用px2rem-loader，因为比起cssrem确实方便很多，但由于我在工作中基于微信做h5页面的时候会使用vux组件库，如果安装这个，需要在build/utils.js中的cssLoader中配置，这样会导致使用vux组件变形。

5、配置cssrem（以750*1334设计稿为例）
因为Flexible会将设计稿分成100份（主要是为例以后能更好的兼容vh和vw），而每一份被称为一个单位a；同时1rem单位被认定为10a，我们可以得出：