作为一名刚转行的前端萌新，接到的第一个工作任务就是写一个H5的前端页面，适配流行的手机，慌得很，适配手机啊，我自学的时候没搞过啊，怎么弄？上网搜，果不其然，网上一大堆文章告诉你viewport的概念，讲了物理像素，逻辑像素等等，最后给出了网易的方案和淘宝的方案，这里手淘团队厉害啦，直接给你封装好了，你可以直接去用。很开心，准备依据网上的网易和淘宝的方案进行适配操作。看了眼自己项目的代码，不用网易的做法，也不用淘宝的做法，之前的前端用了媒介查询设置html的font-size，那我怎么用操作啊。逼得我只能尝试去理解网易和淘宝这样做的原理。这只是个人的理解，如有错误，请大佬们不吝赐教。

首先，对于我拿到的设计稿是750 X 1334的IOS版设计稿，就是基于Iphone6的设计稿，为什么是750*1334的设计稿，网上很多有说明，不难理解。首先谈下网易的做法，viewport中的initial-scale=1说明ideal-viewport就是设备屏幕的大小，网易是这样做的：

动态查询屏幕大小，同时设置html的font-size = document.documentElement.clientWidth() / 7.5 用的是750的设计稿，所以他们取了个7.5, 即是750 / 100 通俗点讲就是把750的设计稿当做是另外一款设备，要在Ihone6与750设计稿之间做个适配，把750设计稿分成了7.5rem大小，有点类似百分比，反正就是分成了7.5份吧，
那我也把Ihone6分成7.5份， 那就存在这样一个等比分式 设备1 / font-size1 = 设备2 / font-size2 = rem的值，用这个去算。
这样一来我的媒介查询就说得通了，我设计稿上有个元素是120px,我的媒介查询320-370的html的font-size是10px 算一下 375 / 10 = 37.5 那换算成设计稿的font-size就是 750 / 37.5 = 20 ，这样我的元素就成了6rem了，而后看看效果，发现好像就是这么一回事= =。
至于淘宝的，那就更好理解了，他们的方案是动态的将手机的viewport通过initial-scale通过放大缩小对应的像素比变成了与设计稿一致，再设置一个font-size，设计稿也根据这个font-size去换算就能得出变换后的rem值。其实也是一个分式 设备1 / font-size1 = 设备2 / font-size2 只不过这里通过动态换算，使设备1 = 设备2 那自然而然font-size1也等于font-size2.
以上就是我的初级理解，或许有不对的地方，请指出，本人虚心接受并改正,谢谢