1. Problem drawn
If html5 to adapt to various resolutions of mobile devices, such dimensions should be used rem units, also given period range is set for each font-size resolution in the html code:
html{font-size:10px}
@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}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
In a real project, associated with the element size css, such as width, height, line-height, margin, padding unit so as to rem, such pages can maintain a consistent page layout in different devices. For example, a page has .item class, set the width to 3.4rem, the actual width corresponding to the class at different resolutions as follows:
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
The above code at first glance nothing issue, responsive design should not be so dry it? But from the workload and the complexity of the aspects to consider, it has the following disadvantages:
(1) .item class width in all devices are 3.4rem, but the actual pixel at different resolutions are not the same, so in some resolution, the width is not necessarily suitable interface effects, there may be too wide there may be too narrow, this time is necessary for width adjustment, then you need to write the code for media queries .item, redesigning a rem value for the resolution. However, there is the case of seven kinds of media queries, css there are many associated with the size of the property, which property range in which the resolution is inappropriate uncertain, eventually leading to write a lot of media queries to fit all the equipment, and at the time of writing had to rem according to a resolution of html font-size to count, this calculation may not necessarily always so easy, such as 40px / 23.5px, the value of the port operator rem not come! This shows how much trouble this one.
(2) font-size codes for 7 ranges given above is not necessarily appropriate, this range is not necessarily suitable 7, there actually may not need so much, so identify these ranges, and each of range most appropriate font-size is too much
(3) are designed to draft a resolution to indicate the size of the tip when converting to rem according to the pixel size of each element in the design draft, which the font-size to prevail in it? This need to know to write.
It is because of some shortcomings mentioned above, I think this way is not particularly good fit, too much trouble to write. To complete the work, we need to find a simpler and more efficient way. So how do the adaptation html5 many mobile devices do? I currently known there are three kinds of solutions will be described below in Section 3, 4, after reading if you have any thoughts as possible to communicate with me in the comments.
2. Simple simple solution to the problem
I think some web app and must be very complex, such as pull hook net, you look at its pages iphone4, iphone6, ipad case like to know:
It's page has a feature that:
Top and bottom bar of the resolution no matter how they change, it's all the same height and position
Each intermediate resolution no matter how they change jobs, recruitment company information icons are located on the left of the entry, salaries are on the right
This is a typical elastomeric app layout: Key elements of high positions and width are the same, only the elements in the container to make scaling. For this type of app, remember that a development principles like: text flow, control flexibility, picture geometric scaling. In FIG. Description:
这个规则是一套基本的适配规则，对于这种简单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的项目就有思路了。最后，欢迎大家在评论里与我交流你对本文的看法，我们可以一起交流，一起进步。