作为一个刚转行的前端小伙伴，接到的第一个任务就是写一个H5前端页面适配流行手机。我很恐慌，适应了手机，我自学的时候没有做，怎么办呢？上网搜了一下，果不其然，网上一大堆文章给大家讲视口的概念，讲物理像素，逻辑像素等等，最后给出网易的方案和淘宝的方案。是的，你可以直接使用它。我很高兴，准备按照网易和淘宝的计划在网上进行适配操作。看了一下自己项目的代码，没有用网易的方法，也没有用淘宝的方法。之前的前端是用mediaquery来设置html的font-size的，那怎么用呢。这迫使我去尝试理解网易和淘宝是如何做到这一点的。这只是我个人的理解。如有错误，请不吝赐教。首先我拿到的设计稿是750X1334IOS版设计稿，是基于Iphone6的设计稿。为什么是750*1334的设计稿，网上有很多解释，不难理解。先来说说网易的做法。viewport中的initial-scale=1表示ideal-viewport为设备屏幕的尺寸。网易是这样做的：动态查询屏幕尺寸，设置font-sizeofhtml=document.documentElement.clientWidth()/7.5使用了750的设计稿，所以取了7.5，也就是750/100。外行人术语来说，他们把750的设计稿当做另一个设备，把Ihone6的设计稿和750适配的设计稿做一个区别，750的设计稿分为7.5rem大小，有点像百分比，反正是分成7.5份，那我也把Ihone6分成7.5份，就有这么一个等比device1/font-size1=device2/font-size2=rem的值，用这个计算。这样，我的媒体查询就有意义了。我的设计稿中有一个元素是120px，我的mediaquery320-370html的font-size是10px。计算375/10=37.5转换成设计稿font-size为750/37.5=20，所以我的元素变成了6rem，再看效果，发现好像是一回事==。至于淘宝，就比较容易理解了。他们的解决方案是通过initial-scale动态缩放手机视口对应的像素比例来和设计稿保持一致，然后设置一个font-size，设计稿也会根据这个字体进行转换-size，可以得到转换后的rem值。其实也是小数device1/font-size1=device2/font-size2，只不过这里通过动态转换，让device1=device2，自然font-size1也等于font-size2。以上是我的初步理解，如有不妥之处，请指出，虚心接受并指正，谢谢
