移動端適配的最終效果：
- 不需要用戶縮放和橫向滾動就能正常的查看網站的所有內容；
- 在不同分辨率的屏幕中，顯示的文字的大小是合適的。比如一段14px大小的文字，不會因爲在一個高密度像素的屏幕裏顯示得太小而無法看清。
移動端適配方案：
1）viewport（scale=1/dpr）
2）rem
3）flex
4）vm/vh
viewport視口：
- visual viewport：可見視口，即屏幕寬度(window.innerWidth)；
- layout viewport：佈局視口，即DOM寬度(document.documentElement.clientWidth)；
- idea viewport：理想視口，寬度等於屏幕寬度；
移動設備的默認viewport是layout viewport，爲了兼容pc端的網頁也能夠在移動端正常顯示，通常layout viewport會大於visual viewport。
meta標籤的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
當layout viewport 大於visual viewport時，會出現滑動滾條。
屏幕分辨率是指縱橫向上的像素點數(單位px)。相同面積的屏幕，分辨率越高，像素點越多，單個像素尺寸越小。所以，在不同的移動設備上，1px CSS像素 = 1px 物理像素 不一定始終是成立。分辨率增大了，但屏幕尺寸並沒有變大多少，必須讓css中的1px代表更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設備差不多，不然就會因爲太小而看不清。
現在手機的idea viewport寬度都是非常接近的(常見的有320、360、384、400)，所以當我們針對某個設備的idea viewport做出的網站，在其他設備上也的表現也不會相差太多。