首页 > 代码库 > 主流的h5前端开发流程
主流的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） 。
到此，我们页面上的元素都可以通过rem单位来设置，他们会根据<html>元素的font-size做相应计算，从而达到不同屏幕的适配。
- 下面就是如何将px转换成rem：
前面说了，我们是按750px的设计稿进行开发，为了方便换算，flexible将750pt下的<html>元素设置font-size为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
主流的h5前端开发流程