本文作者:开课吧前端团队
https://mp.weixin.qq.com/s/WLjScwNRTFJI84TWf08eLw
我们知道,随着移动互联网的发展。
现在已经很少人会再电脑上去看网站了。
所以作为开发者,我们顺其自然,必须要去优化自己的网站,让它在手机上依然可以正常显示。
这也是为什么会出现适配这个问题的根本原因:
要把一个那么大的网站放到手机上去。
首先,来看看手机上网站的效果☟
先来思考一个问题:
如果想要像右边手机上那样,在页面中显示一个宽度为屏幕宽度50%的色块,应该怎么做?
这个我估计大家都知道,写个div,宽度50%不就好了?
但是,如果box的外面有一个父级,并且不确定父级的宽度时多少的时候,我们要如何保证:
box的宽度是屏幕宽度的一半呢?
因为css中,宽度如果给百分比,那么这个元素的宽度时根据其父级的宽度来计算的。
也就是说在上面的代码中,如果main的宽度是屏幕宽度的一半,那么box的宽度就只有屏幕宽度的四分之一了。
所以大多数情况下,在移动端上使用百分比都是不太好的一个单位。
因为它的参考对象是不固定的;
所以我们需要一个具有唯一参考对象的相对单位,此刻,rem便应运而生。
先来看看rem 它是个相对单位,它相对的是根元素(html)的font-size大小。
也就是说,如果html的font-size设置为20px, 那么一个rem就是20px;
我们正是利用这一点,让页面在不同宽度的手机上进行放大缩小,从而达到适配的目的的。
当屏幕宽度大,我们只需要把html的font-size属性变大,整个页面就变大了。
当屏幕宽度变小,font-size相应减小就可以了。
这是移动端适配的基本思路,其他的都是万变不离其宗。
那问题来了,怎么做呢?
调整页面视口设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
就是这串代码,估计不说你们也知道是用来做什么的。
为什么会有这个呢?
那是因为浏览器厂商在开发手机浏览器的时候,考虑到很多网站没有针对移动端去做适配。
所以不管手机多大,默认在手机上打开浏览器,里面的宽度都是980px。
那既然我们都讨论移动端适配了,那么这个980就没用了。
我们的目的是要让手机的分辨率还原:
你手机分辨率大,自然宽度就大一些,分辨率小,页面的宽度就小一些。
这样显示的效果也是最合适的,眼睛看着才舒服。
把单位换算成rem
这里是重点,敲黑板啦。
还是刚才的那个box,我现在把它的宽度变成写成 5rem。
这个数字随便写,无所谓的~
然后用手机打开,就是这个样子的:
现在我用了浏览器里的模拟器,模拟iPhone6 Plus,这个手机的屏幕宽度时414px。
然后我们知道文字大小在没有设置的情况下一般是16px 。
所以现在的box宽度是80,上图能看到
现在,我不想修改box的宽度值。
也就是说这个5rem不动,但是我想让box的宽度变成屏幕宽度的一半。
也就是207px,这下又该怎么办呢?
那么我肯定就需要去修改html的font-size了,我们想要让5rem 等于207。
那么1rem应该等于多少?
这个算式大家应该没问题吧?
也就是207除以5,得到41.4了。
数学不好的用计算器敲一下哈~
现在我们去修改html的font-size,把它变成41.4 看看效果:
手机上的效果是这样的:
果然,box的宽度就变成207了,也就是屏幕宽度的一半了。
现在我再换一个小一点的设备看看,换iPhone5
iPhone 5 的屏幕效果是这样的:
可以看到box的宽度还是207没变。
但是它已经占据屏幕宽度的一大半了。
但是我们要的效果是box依然只占屏幕宽度的一半怎么办?
那就再次修改html的font-size咯。
目前iPhone5 的宽度可以看到是320,一半也就是160。
所以用160除以5 得到32。
所以设置html的font-size为32px
得到效果:
果然,只要我们修改html的font-size就能达到效果。
但是我们不可能说换一个设备就去换一下html的font-size呀。
因为我们不知道用户用的是什么手机。
所以这时候我们就需要找人帮忙了,找谁呢?
找js,js我们会,没问题,不需要太高深的js技巧。
但是找到js怎么做呢?我们不妨来观察一下。
第一次用iPhone6去看的时候,iPhone6的宽度时414。
然后font-size设置成41.4px;
第二次换iPhone5,iPhone的宽度是320,然后需要把font-size设置成32px;
发现问题了么?再仔细看看?有没有发现font-size总是屏幕宽度的十分之一?
那么这时候好办了,我们只需要用js获取一下屏幕宽度,然后动态修改一下html的font-size就好了。
So Easy!
现在把css里的font-size设置去掉就OK啦!
这是现在的所有代码,现在box在任何手机上显示都是屏幕宽度的一半啦!
不过别急,还有一个问题!!!box的5rem到底是怎么来的?
现在我们知道5rem代表屏幕宽度的一半,如果设计稿是750宽度,那么代表的就是 375px,
那如果再设计搞上量得一个元素的宽度是180呢?312呢?
不着急,我们来看看375px和5rem的关系。
375px 等于 5个rem, 那么1个rem等于多少px ?
75px对吧。
那么,如果设计稿上量到的宽度是182px,那么等于多少rem呢?
嗯,有点晕,来来来,列一下算式:
1rem = 75px
182px = ?rem
是这样没错吧,那么换算一下是不是182除以75, 得到的就是rem的个数了呢?
所以,最终的结果就是:设计稿上,量得的宽度直接除以75 得到的就是rem数了
换算之后,得到182px = 2.4267rem
我们把这个结果放到代码上去看看
(注意,设计稿的宽度时750,所以放到750的设备上才会1:1还原)
现在我们就用一个宽度750的设备去看看,得到的宽度会不会是182呢?
如此,我们的移动端适配就算是完美成功啦!
最后给大家总结一下移动端适配:
1,设置视口
2,用js动态修改html的font-size 如: font-size = 屏幕宽度 / 10
3,换算rem 如:182 / 75
最后
欢迎关注「前端瓶子君」,回复「交流」加入前端交流群!回复「算法」,你可以每天学习一道大厂算法编程题(阿里、腾讯、百度、字节等等)或 leetcode,瓶子君都会在第二天解答哟!另外,每周还有手写源码题,瓶子君也会解答哟!
》》面试官也在看的算法资料《《“在看和转发”就是最大的支持