关于移动端rem适配的相关方案研究

1.移动端的相关适配目前探索中已经寻找了很多种的适配方案，

    1）响应式布局。

    2）640px/750px做一版移动端的设计图（em适配）。

    3）640px/750px做一版移动端的设计图（rem适配）。

      以上方案实际开发中本人都已经使用过，后来最终选择第三种方案。为什么呢？第一种响应式方案，看似简单，实际开发中其实加大了开发的工作量，各种屏幕的适配会让你抓狂。

       第二种方案，也使用了一段时间，开发效率可以，一套下来适配多种屏幕，但是后期涉及到相关页面的调整简直会让你崩溃掉，改一处-处处都在变着（因为该种方案是根据字体来调整界面，父元素的字体改了，子元素跟着改-风不疯狂，我们配置了多少种大小的字体？），吓得直接不敢改了，最后放弃了em适配方案。

       第三种rem适配方案在开发中开始采用后发现效率-适配都很好，根据html的根子体来确定大小，

       看见以下方案了吧，其实都不能很好的适配多变的移动端屏幕。

       也就是用CSS媒体查询来改变根字体的大小进行适配。该种方案也放弃了。

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}

2.有没有一种方案能够解决根子体大小去适配呢？答案是有，阿里巴巴强大的团队提出了解决方案

此处需要普及下，像素比，屏幕密度，像素等

详细查看http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

淘宝的解决方案是把屏幕分成了100份（bootstrap分成了12份），

我们常用的设计稿是640px，750px，

而淘宝的方案是 750px/100份=7.5px/份

我们得到的是  1份=7.5px

而把一份的宽度定义为10rem，那么750px的设计稿换算下就是，1rem=75px

       OK方案基本已经确定了，但是用我们的css像素去解决单位转换，把px转换成rem，计算器敲着那效率也太低了吧，淘宝同样有该种工具可以供使用

        https://github.com/flashlizi/cssrem

        https://www.npmjs.com/package/px2rem

3.需要注意的是，淘宝方案中meta viewpoint，html根子体font-size都是设置好的

Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

git上的详细介绍

https://github.com/chesscai/flexible-adaptive

4.关于移动端viewport的详细介绍

https://www.zybuluo.com/gongzhen/note/170557

5.项目的快速搭建

1）在所有文件加载之前引入（不要设置meta为固定的）

<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

引入

http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

2）确定根字体大小（不要在css中设置html根字体大小）

设计稿尺寸/10=html根字体大小

例如640px/10=64px，那么根字体就是64px。

3）单位换算

设计稿px/根字体大小

好了到此结束。