移动端适配

移动端适配

涉及移动端适配，首先要弄清楚几个概念：

1 viewport：

​ 即设备上用于显示网页的那一块区域，也叫视口。它并不等同于浏览器的可视区域，他可能比浏览器的可视区域大，也可能小。在pc上，通常是多少的设备分辨率就显示多少分别率，此时css 1px 通常就等于物理的1像素，且由于能够通过调整浏览器窗口大小来调整浏览器的可视区域，所以在pc上可以不用那么在意viewport。

​ 但是到了移动设备上，这个viewport便显得尤为重要了，因为我们无法调整浏览器的可视区域，而它的可视区域就是屏幕尺寸大小。然而为了能够将内容全部显示出来，所以很多网站会将viewport宽度设定为980px或1024px，但这样造成设备上的浏览器出现了横向滚动条。

​ 同时由于对于相同尺寸的设备，却有了不同的分辨率（高分屏等等），这导致了css 1px不再是等于1物理像素了。对于高分屏，虽然分辨率提高了，但尺寸无法变大，所以只能在1px像素上容纳更多物理像素。

2 viewpoet像素：

​ 它本质是DIP（Device Independent Pixels），中文意思设备无关像素，是与上述所有像素都无绝对逻辑关系的一个单位。其实是浏览器内部对逻辑像素进行再处理的结果，简单来理解就是调整逻辑像素的缩放来达到适应设备的一个中间层

3 设备独立像素 dip：

​ 即与设备无关的像素，因为在现在相同的设备尺寸已经有了不同数量级的物理像素，而我们使用的css px就是设备独立像素。

4 设备像素比dpr：dpr = 设备物理像素/设备独立像素

5 每英寸像素 ppi：指的是屏幕在每英寸的物理像素

6 物理像素：设备能控制显示的最小单位 我们常说的分辨率指的就是物理像素

7 设计师给的设计图的像素px：物理像素

​ 我们在对不同尺寸的手机进行适配时，其实应该要注意的是，对于更大的屏幕，应该展示更多的内容，而不是更大的内容。但是很多时候，设计师并不会针对性的给出每一套设计，同时如果真要针对不同尺寸进行不同的适配，简单点的可能还好，灵活运用布局或许能够实现，但是对于复杂些的则可能要通过媒体查询来实现了。这样成本上也更高。所以实际要如何实现还是看需求与条件。

适配：

​ 在过去很多人都采用rem的方法来实现移动端适配，rem作为一个以根元素font-size为基准的单位，而过去常常配合flexible实现不同移动设备端兼容自适应问题。实际上rem只是在viewport，vw，vh还未很好的实现兼容的时候的一个替代过渡品，而现在完全可以用px + vw 来实现移动端适配，要求高的可以媒体查询。同时，要注意设置好viewport。

​ 如果一定要使用等比，或是有一定需求。则可以采用px + vw，并以rem过渡，实质上还是px+vw。下面是具体实现的例子：

对于iPhone6来说，如果想要1rem=100px的适配：

100vw = 375 px，1vw = 3.75px，1px = 0.2666666667vw约等于0.267vw

可以得知 当 1rem = 100px = 26.67vw 时，即可满足要求

所以再样式中设置 html { font-size: 26.67vw },此时1rem = 100px

这里虽然使用了rem，但已经失去了原有意义仅仅作为一个过渡单位，因为如果直接使用vw的话，换算起来十分麻烦。

进一步考虑方便的话可以通过使用相关的px转rem的插件或是loader来进行处理，这样基本上就完成自适应了。