移动端网页自适应

现在开发的最多的就是移动端的项目。
PC端的相对来说太少了。

自适应

自适应的意思就是在不同屏幕尺寸大小的手机上，看见我们开发出来的网页是一样的。（这和响应式不是一个东西，不要弄混淆）

在说怎么实现之前先来了解一些移动端的概念：
px、英寸、ppi、dpr

Pixel，像素。分为真实像素，和逻辑像素（CSS像素）。

英寸

1英寸 = 2.54 厘米（1 in = 2.54 cm）

比如坚果Pro2S，屏幕6.01英寸，意思就是手机屏幕对角线的长度为6.01英寸（6.01 * 2.54 = 15.2654 cm ）。

PPI

Pixels Per Inch，简称PPI，屏幕像素密度。指的是1英寸上的像素点数量。PPI越高，显示画面越精细。

DPR

Device Pixel Ratio，设备像素比。指的是默认缩放为100%的情况下，设备真实像素和CSS像素的比值。

以iphone8为例，iphone8的CSS像素为375px * 677px，其设备像素为750px * 1354px，所以DPR等于（750 × 1354） ÷ （375 × 677）的结果4，再开平方，最后DPR = 2

viewport 意为视口。我们需要把浏览器的视口宽度设置为设备的屏幕宽度，一些智能的编辑器，会默认帮我们生成它。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这是一个存在于html头部中的meta标签，content=“视口宽度=设备屏幕宽度，禁止用户缩放，默认缩放比例=1，最大缩放比例为=1，最小缩放比例=1”

说白了就是不允许你缩放。（有的浏览器不吃这套，照样缩放）

移动端开发使用的单位不再是固定的px，而是rem（em并不是很实用）、百分比、vw。

百分比：就是父元素宽高的百分之几，移动端开发的时候我们通常将html、body宽高设置为100%。

rem：根据根元素（也就是html标签）的font-size数值来计算，默认浏览器font-size 是16px，移动端开发的时候我们会使用媒体查询或者JavaScript动态的计算和改变html标签的font-size值。

vw：将屏幕宽度分为100份，1vw = 一份。

实现移动端自适应的方式不少，我个人喜欢用rem + js动态改变html标签的font-size来实现。

rem是相对于根标签的font-size值来的。默认浏览器字体大小为16px，1rem = 16px，但是移动端里面我们需要根据视口的宽度来动态调整它。

动态改变html的font-size 的方法一个是媒体查询。还有一个是用JavaScript，这里说的就是使用JavaScript。

我们可以通过JavaScript拿到当前视口的宽度，用这个视口的宽度来除以我们设计稿上的宽度，会得到一个比值，将这个比值设置到html的font-size上。

我们拿到的设计稿基本都是750的，因为设计师会以iPhone6屏幕为标准来设计。

var doE = doc.documentElement;
doE.style.fontSize = 100 * (clientWidth / 750) + 'px';

现在我们在750的设计稿上测量到一个宽度是150px，我们写进代码里面的就是 width: 1.5rem;即 150 ÷ 750