1. 问题的引出
若是html5要适应各类分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码：css
html{font-size:10px}html
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}前端
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}html5
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}git
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}github
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}web
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}app
@media screen and (min-width:800px){html{font-size:25px}}iphone
在实际项目中，把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem做为单位，这样页面在不一样设备下就能保持一致的网页布局。举例来讲，网页有一个.item类，设置了width为3.4rem，该类在不一样分辨率下对应的实际宽度以下：布局
321px <= device-width <= 375px，font-size:11px ---> .item的width：34px
376px <= device-width <= 414px，font-size:12px ---> .item的width：37.4px
415px <= device-width <= 639px，font-size:15px ---> .item的width：40.8px
640px <= device-width <= 719px，font-size:20px ---> .item的width：51px
720px <= device-width <= 749px，font-size:22.5px ---> .item的width：76.5px
750px <= device-width <= 799px，font-size:23.5px ---> .item的width：79.8999999px
800px <= device-width ，font-size:25px ---> .item的width：85px
以上代码乍看没啥问题，响应式设计不就应该是这么干的吗？可是从工做量和复杂度方面来考虑，它有如下几个不足：
（1）.item类在全部设备下的width都是3.4rem，但在不一样分辨率下的实际像素是不同的，因此在有些分辨率下，width的界面效果不必定合适，有可能太宽，有可能太窄，这时候就要对width进行调整，那么就须要针对.item写媒介查询的代码，为该分辨率从新设计一个rem值。然而，这里有7种媒介查询的状况，css又有不少跟尺寸相关的属性，哪一个属性在哪一个分辨率范围不合适都是不定的，最后会致使要写不少的媒介查询才能适配全部设备，并且在写的时候rem都得根据某个分辨率html的font-size去算，这个计算可不见得每次都那么容易，好比40px / 23.5px，这个rem值口算不出来吧！因而可知这其中的麻烦有多少。
（2）以上代码中给出的7个范围下的font-size不必定是合适的，这7个范围也不必定合适，实际有可能不须要这么多，因此找出这些个范围，以及每一个范围最合适的font-size也很麻烦
（3）设计稿都是以分辨率来标明尺寸的，前端在根据设计稿里各个元素的像素尺寸转换为rem时，该以哪一个font-size为准呢？这须要去写才能知道。
正是由于以上提到的一些不足，我以为这种适配方式不是特别好，写起来太麻烦。为了完成工做，咱们须要找寻更简单更有效率的方法。那么html5该如何去作众多移动设备的适配呢？我目前已知的有3种解决方法，将会在下文的第2,3,4部分阐述，若是你阅读以后，有什么想法，尽可在评论中与我交流。
2. 简单问题简单解决
我以为有些web app并必定很复杂，好比拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：
它的页面有一个特色，就是：
顶部与底部的bar无论分辨率怎么变，它的高度和位置都不变
中间每条招聘信息无论分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边
这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在作伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：
这个规则是一套基本的适配规则，对于这种简单app来讲已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能须要额外媒介查询对布局进行调整的就是小屏幕设备。举例来讲，由于如今不少设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，因此若是你根据设计稿作出来的东西，在iphone4里面可能显示不下，好比说拉钩网底部那个下载框，你对比看下就知道了，这是4：
这是6:
6下面两边的间距比4多不少，说明拉勾对4确定是作过适配的，从代码也能够证明这一点：
不过若是你拿到的是根据4的设计稿，那就没有问题，比4分辨率大的设备确定能显示根据4的尺寸作出来的东西。
还有一点，这种状况css尺寸单位用px就好，不要用rem，避免增长复杂度。
3. 淘宝的作法
动态计算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
关于这种作法的具体实现，淘宝已经给咱们提供了一个开源的解决方案，具体请查看：
https://github.com/amfe/lib-flexible
4. 总结
总算是罗里吧嗦地把文章写完了， 但愿你还以为满意，这篇文章对我来讲价值也很大，从此作html5的项目就有思路了。最后，欢迎你们在评论里与我交流你对本文的见解，咱们能够一块儿交流，一块儿进步。