我要怎么才能实现：移动端的适配操作？

本文作者：开课吧前端团队

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，瓶子君都会在第二天解答哟！
另外，每周还有手写源码题，瓶子君也会解答哟！
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持