移动端适配原理浅析

浏览: 25 发布日期: 2017-12-24 分类: html5

作为一名刚转行的前端萌新,接到的第一个工作任务就是写一个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.
以上就是我的初级理解,或许有不对的地方,请指出,本人虚心接受并改正,谢谢

返回顶部