适配的概念：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）。
适配的元素：我们在有尺寸的地方都需要考虑一下适配，一般在字体、宽高、间距和图像（图标、图片）这些元素上。
适配的方法有：
1、百分比适配；
2、viewport缩放适配；
3、DPR缩放适配；
4、rem适配 --- 目前比较主流的一个适配方法；
5、vw、vh适配 --- 可以说这种方法就是为适配而生的。
下面，我们来一一介绍这五种适配方法。
当然除了这五种适配方法之外，还有很多的关于移动端适配的方法，不过其他的方法都是基于这五种方法而产生的。
第一种，百分比适配：
核心是，根据父级算百分比，需配合其他布局使用（一般配合flex盒子使用）。
一般较常用在，高度不变，宽度在变的布局。
如下图:
在这些作为移动端页面导航的地方，一般都是使用的百分比适配方法。
第二种，viewport缩放适配：
核心是，把所有机型的css像素设置成一致的。
1. viewport 需要通过js动态的设置（不能直接把device的值设置成数值）。
2. 通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的。
公式：缩放比 = css像素(当前值) / 375(目标值)
获取css像素的方法有（前提条件 viewport 没有缩放）：
var curWidth = document.documentElement.clientWidth;
var curWidth = window.innerWidth;
var curWidth = window.screen.width;
这种适配方法是基于meta标签的，<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">；然后利用js来使得设备的css像素都变成一致。
如，以下代码：
然而，这种方法并不常用，因为如果把所以的移动设备都设置成统一的css像素值，那么页面在所有设备中都是一样的，那就不能体现各种移动端设备的区别了。
第三种，DPR（像素比）适配方法：
核心是，把css像素缩放成与设备像素一样大的尺寸。（就是css像素 ：设备像素 = 1 ：1）
原理是，根据DPR的值，把视口进行缩放，缩放到物理像素，也就是把css像素的值设置成物理像素，让所有的设备都变成一个css像素对应一个设备像素。
获取DPR的方法：window.devicePixelRatio
这种方法和第二种viewport缩放方法类似，DPR缩放方法在移动端也不常用，原因跟viewport缩放方法差不多。
第四种，rem适配：
核心是，把所有的设备都分成相同的若干份，再计算元素宽度所占的份数。
em: 作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小。（font-size：m px; ==> 1em = m px)
rem：css3新增的一个相对单位，是相对于根元素字体大小。
适配原理：把所有的设备都分成相同的若干份，再计算元素宽度所占的份数。（栅格化）
关于html字体大小计算公式:
1. 元素适配的宽度（算出来的） = （ 屏幕实际的宽度（css像素） / 100 ） * 元素实际占的列数
2. 元素在设计稿里的宽度（量出来的）
3. 列数（随便给的） 100
4. 一列的宽度（算出来的） = 屏幕实际的宽度（css像素） / 100 。（一列的宽度就是一个rem）
5. 元素实际占的列数（算出来的） = 元素在设计稿里的宽度 / 一列的宽度
设置html字体的方法：
用js来设置html的字体大小
方法一，画稿的值换算rem
若，以iPhone6为例，html.style.fontSize = 375 / 16 = 23.4375px;那么可知，在iphone中，1rem = 23.4375px；4rem = 93.75px
下图，width相对于html字体大小，取4rem的宽。
- 真正切图时候的方法：先算出rem，还是根据设备实际的css像素。再量出一个元素在设计稿里的尺寸。最后拿这个尺寸，除以DPR的值后，再去换算rem。
方法二，直接使用画稿的值
列如: 画稿的值为187.5px，那么宽度就可以写为1.875rem。就像是把设备的宽度分成了100份一样。
用媒体查询设置html字体大小（css3方法） --- 用的不多
这个方法要手动设置每种设备的html字体大小。
例如：
苏宁易购使用的就是这个方法，大家可以去看看苏宁的源码，这里就不过多介绍了。
使用rem会出现的问题：
1、chrome下有最小字体限制，必须为12px，所以这个值不能小于12。
2、如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍。
第五种，vw适配：
为适配而生的单位(跟rem分成一百份原理一样)。
- vw: Viewport’s width 的简写，1vw 等于视口宽度的1%。(100 * (clientWidth / designWidth) + 'px')
以iPhone6为例 375 / 100 = 3.75px; 1vw = 3.75px;
- vh: Viewport’s height 的简写，1vh 等于视口高度的1%。
- vmin: 取vw与vh中最小的值。
- vmax: 取vw与vh中最大的值。
支持情况： >= ios8 , >= Android 4.4 。
方案一：通篇使用vw。
方案二：通过vw设置根节点字体大小，页面尺寸依然使用rem。（用的较多）
若以iphone6为例，375 / 100 = 3.75px; 1vw = 3.75px; 9.259259259259261vw = 34.72222222222223px; 那么 1rem = 34.72222222222223px。
最后，我们来讲一下，如何在自己的手机来打开自己在电脑上所写的本地文件。
注意：
1. 手机中打开电脑的页面，一定要保证手机与电脑在同一wifi下。
2. 你写的文件要存放在wampserver的www目录下，并且你的电脑上要打开wampserver。
3. 编辑器要安装相应插件，以vscode编辑器为例，安装Live Server插件。
然后所写的html文件下面有Go Live字样，点击就能打开Live Server了。
如图，未打开时，
打开后，
此时文件地址变了
然后，在电脑打开电脑终端（也叫命令提示符）；找不到的话，在桌面左下角有个搜索的，在那里搜索cmd就能打开命令提示符了。
在终端输入 ipconfig；
第三步，找到 IPv4 地址；
第四步，复制地址，替换之前页面的地址；
然后把5500冒号前面的地址换成 IPv4 地址。
此时页面地址又变了
第五步，复制地址生成二维码；
在浏览器找一个二维码生成器，生成二维码。
