1.问题解决如果html5要适配各种分辨率的移动设备，应该使用rem作为大小单位，同时在代码中给每个分辨率范围一段话设置html上的font-size：html{font-size:10px}@mediascreenand(min-width:321px)and(max-width:375px){html{font-size:11px}}@mediascreenand(min-width:376px)and(max-width:414px){html{font-size:12px}}@mediascreenand(min-width:415px)and(max-width:639px){html{font-size:15px}}@mediascreenand(min-width:640px)and(max-width:719px){html{font-size:20px}}@mediascreenand(min-width:720px)and(max-width:749px){html{font-size:22.5px}}@mediascreenand(min-width:750px)and(max-width:799px){html{font-size:23.5px}}@mediascreenand(min-width:800px){html{font-size:25px}}在实际项目中，与元素大小相关的css，如width、height、line-height、margin、padding等，都是以rem为单位，让不同的页面保持一致的web页面布局可以跨设备维护。比如一个网页有一个.item类，宽度设置为3.4rem。该类在不同分辨率下的实际宽度如下：321px<=device-width<=375px,font-size:11px--->.itemwidth:34px376px<=device-width<=414px,font-size:12px--->.itemwidth:37.4px415px<=device-width<=639px,font-size:15px--->.项目宽度：40.8px640px<=设备宽度<=719px，字体大小：20px--->.item宽度：51px720px<=设备宽度<=749px，字体大小：22.5px--->.项目宽度：76.5px750px<=设备宽度<=799px，字体大小：23.5px--->.item宽度：79.8999999px800px<=设备宽度，字体大小：25px--->.item宽度：The85px以上的代码乍一看还不错，这不就是响应式设计应该做的吗？但是考虑到工作量和复杂度，它有以下缺点：(1).item类的宽度在所有设备下都是3.4rem，但是不同分辨率下实际像素是不一样的，所以在某些分辨率下，界面效果宽度可能不合适。它可能太宽或太窄。这时候就需要调整宽度。那么，就需要编写媒体查询代码了。设计一个rem值。不过这里的mediaquery有7种，css中有很多size相关的属性。不确定哪个属性不适合哪个分辨率范围。最终，会导致编写大量的媒体查询来适应所有设备。而且写的时候rem要根据某个分辨率html的font-size来计算，这个计算不一定每次都那么容易，比如40px/23.5px，这个rem值是计算不出来的！由此可见麻烦有多大。(2)上面代码给出的7个范围下的font-size可能不合适，这7个范围也不一定合适。其实可能没有那么多，所以找出这几个范围，每个范围最合适的font-size也是很麻烦的（3）设计稿上标注了resolution。前端将设计稿中每个元素的像素大小转换成rem时，应该以哪个font-size为标准呢？？需要写作才能知道。也正是因为上面提到的不足，我觉得这种适配方式不是特别好，写起来也太麻烦了。为了完成工作，我们需要找到更简单、更有效的方法。那么html5应该如何适配众多的移动设备呢？我目前知道的有3种解决方案，将在下面的第2、3和4部分中进行解释。如果大家阅读后有什么想法，欢迎在评论中与我交流。简单的问题和简单的解决方案我觉得有些webapp不一定很复杂，比如拉勾网，你可以看看它的页面在iphone4,iphone6,ipad下的样子：图片描述图片描述图片描述它的页面有一个特点，就是就是：不管顶底bar的分辨率怎么变，它的高度和位置都保持不变这种app就是典型的弹性布局：关键元素的高、宽、位置不变，只有容器元素正在缩放。对于这类app，最好记住一个开发原则：文字流转、控制灵活、图片按比例缩放。用图片描述：这个图片描述规则是一套基本的适配规则，对于这个简单的app来说已经足够了，也是后面要讲的rem布局的基础。此外，对于拉钩等应用，可能需要额外的媒体查询来调整小屏幕设备的布局。比如，因为很多设计稿都是基于iphone6的尺寸，而iphone6设备的逻辑像素宽度是375px，而iphone4的逻辑像素是320像素，所以如果你根据设计稿做东西，在iphone4中可能无法显示。比如拉勾网底部的下载框，对比一下就可以看到。这是4：图片描述是6：图片描述6的两边距离比4的大很多，说明拉钩对了4肯定是适配了，这个可以从中确认代码：图片描述但是如果你根据4拿到设计稿，那就没问题了。分辨率大于4的设备肯定能按照4做的东西显示尺寸。还有一点，在这种情况下，最好使用px作为css大小单位而不是rem，以避免增加复杂度。淘宝的做法是动态计算html的font-sizedocument.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px';关于这种做法的具体实现，淘宝已经给我们提供了一个开源的解决方案，具体请查看：https://github.com/amfe/lib-f...总结终于写完了文章，希望大家还是很满意的，这篇文章对我也有很大的价值，以后对html5项目会有想法。最后，欢迎大家在评论中和我分享对这篇文章的看法，我们一起交流，共同进步。
