h5适配的解决方案

一、流程

设计师以750pt×1334pt尺寸进行设计（当然高度随内容变化），最后用该尺寸的设计稿进行标注、切图，前端采用淘宝的开源方案flexible进行适配。

二、 flexible使用方法

Flexible的使用方法非常简单，只需要引入flexible_css.js和flexible.js 下载地址

l 第一种方法将文件下载后放入项目中引用（省略写法，大家都懂的）

l 第二种直接使用阿里CDN资源

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

l 第三种直接使用内联的方式将js贴到<head></head>之间（强烈建议）

js执行完成后，会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。Js会根据不容屏幕判断dpr的值（1/2/3）,同时给html加上相对应的font-size（例如75px）。其中dpr是设备的像素比，例如iphone4-6的dpr为2，iphone6p-7p的dpr为3；因为安卓的高清屏太杂乱，flexible未做安卓的高清适配，统一将安卓的dpr设置为1，flexible判断到如果dpr为1且屏幕宽度>540，认定为该手机是安卓高清屏手机，则屏幕宽度恒定设为540px（据统计540px是安卓手机最大的css像素）。

到此，我们页面上的元素都可以通过rem单位来设置，他们会根据<html>元素的font-size做相应计算，从而达到不同屏幕的适配。

下面就是如何将px转换成rem：

前面说了，我们是按750px的设计稿进行开发，为了方便换算，flexible将屏幕宽度为750的<html>元素设置font-size为75px，我们将75px称之为rem基准值，针对这份设计稿，我们可以知道 1rem=75px。

这样一来，对于视觉稿上的尺寸换算,只需要将原始px值除以rem基准值，例如视觉稿中179px*150px换算成2.346667rem*2rem。

如何快速换算

在实际生产过程中，每次都要计算px转换rem，肯定会觉得非常麻烦，降低生产效率，为了提高效率，建议大家使用Hbuild或sublime开发工具，这两个工具都有自动转换的插件。

以Hbuild为例，右击项目->属性->代码助手设置->启用项目特定的设置->启动px转rem提示

字号不使用rem

在不同的屏幕下，我们是不希望看到字号也随屏幕缩放，我们希望在小屏上看清文本，在大屏上看到更多的文本，所以字号还是用px单位设置，以及现在绝大多数的字体是点阵字体，通常是16px和24px，所以不希望出现13px、15px这样的奇葩尺寸。

根据flexible的适配方案，dpr=2时<meta name=”viewport”>initial-scale属性为0.5，dpr=3时<meta name=”viewport”>initial-scale属性为0.3333333333

所以的用[data-dpr]属性来区分不同dpr下的文本字号大小

.detail-line-content{font-size: 12px;}

[data-dpr="2"] .detail-line-content{font-size: 24px;}

[data-dpr="3"] .detail-line-content{font-size: 36px;}

三、总结

flexible是淘宝开源的h5适配方案，手机淘宝从14年开始至今一直在使用，比较稳定，并且在开发过程中不要进行复杂的折算，直接使用设计稿中的尺寸，方便好用。该方法是主流的h5前端开发方案之一，这篇文档是我结合大漠老师写的文档和我的一些开发经验，整理了较为简单的流程，如有错误之处，敬请指正。

四、参考资料

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

https://zhuanlan.zhihu.com/p/25422063