移动端H5页面的最佳终端适配之Flexible

lib-flexible是什么？

lib-flexible是一个制作H5适配的开源库，可以点击这里下载相关文件，获取需要的JavaScript和CSS文件。

当然你可以直接使用阿里CDN：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

将代码中的{{version}}换成对应的版本号0.3.4。

flexible的实质

flexible实际上就是能过JS来动态改写meta标签，代码类似这样：

var metaEl = doc.createElement('meta');

var scale = isRetina ? 0.5:1;

metaEl.setAttribute('name', 'viewport');

metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

if (docEl.firstElementChild) {

    document.documentElement.firstElementChild.appendChild(metaEl);

} else {

    var wrap = doc.createElement('div');

    wrap.appendChild(metaEl);

    documen.write(wrap.innerHTML);

}

事实上他做了这几样事情：

动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值

使用方法

lib-flexible库的使用方法非常的简单，只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件：

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:

<script src="build/flexible_css.debug.js"></script>

<script src="build/flexible.debug.js"></script>

或者直接加载阿里CDN的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

例如：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="yes" name="apple-touch-fullscreen">

        <meta content="telephone=no,email=no" name="format-detection">

        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

        <link rel="apple-touch-icon" href="favicon.png">

        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">

        <title>再来一波</title>

    </head>

    <body>

        <!-- 页面结构写在这里 -->

    </body>

</html>

把视觉稿中的`px`转换成`rem`

目前Flexible会将视觉稿分成**100份**（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1a   = 7.5px

1rem = 75px

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，<html>对应的font-size为75px，

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。

文本字号不建议使用`rem`

前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {

    width: 1rem;

    height: 0.4rem;

    font-size: 12px; // 默认写上dpr为1的fontSize

}

[data-dpr="2"] div {

    font-size: 24px;

}

[data-dpr="3"] div {

    font-size: 36px;

}

为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：

@mixin font-dpr($font-size){

    font-size: $font-size;

    [data-dpr="2"] & {

        font-size: $font-size * 2;

    }

    [data-dpr="3"] & {

        font-size: $font-size * 3;

    }

}

有了这样的混合宏之后，在开发中可以直接这样使用：

@include font-dpr(16px);

当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。

Flexible地址：https://github.com/amfe/lib-flexible

cssrem地址：https://github.com/flashlizi/cssrem