目前Web Appp 螢幕適配方法有很多，比如流式佈局，限死高度，響應式等方法；我認為rem為最佳的解決方案，它可以以最小的代價適配所有的螢幕

不得不說一下viewport：只有明白了viewport的概念以及meta標籤的使用，才能使網頁適配。

PPK關於三個viewport（視口）理論

佈局視口 預設的viewport：為什麼body的寬度是980px？980為移動端的佈局視口。        

對於移動裝置而言：佈局視口 為裝置螢幕上用來顯示網頁的區域，早期瀏覽器廠商為了讓使用者在小螢幕下網頁也能夠顯示地很好，所以把佈局視口寬度設定地很大。它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，移動裝置上的佈局視口都是要大於瀏覽器可視區域的（iphone,ipad,android,chrome均為980px）

視覺視口：物理螢幕的可視區域，同樣尺寸的螢幕，畫素密度大的裝置，物理畫素會更多。比如iphone6：750*1334

理想視口：解析度

dip & 解析度：移動端的分解析度就是理想視口，比如MBP的佈局視口是：2880 * 1800。當設定螢幕解析度為 1920 * 1200 的時候，理想視口是1920畫素，裝置畫素比是1.5(2880/1920)。而移動端手機螢幕通常不可以設定解析度，比如iPhone6：解析度 375 * 667，物理畫素 750 * 1334，@2x(Retina)

邏輯畫素寬度*倍率 = 物理畫素寬度；

所以，css中的1px並不等於裝置的1px，現在就可以解釋為什麼移動端css裡面寫了1px, 實際看起來比1px粗。以iPhone6為例：meta設定了viewport的寬度等於理想視口為375px，新設的viewport能填充滿螢幕寬，但它的設定和螢幕物理解析度750px是不相同的。 此時css裡寫的1px長度對映到物理畫素上就有2px那麼長。

現在提供一個常用的解決方案：用小數來寫px值，利用window裡的devicePixelRatio屬性

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

總結：

利用meta標籤對viewport進行控制：移動裝置預設的viewport是layout viewport，但在進行移動裝置網站的開發時，我們需要的是ideal viewport理想視口 375。

1. width屬性被用來控制佈局視口的寬度，width=device-width 也就是將viewport的寬度設定為理想視口的寬度。網頁縮放比例為100%時，一個CSS畫素就對應一個解析度畫素(iphone6:375px)
2. initial-scale=1 表示將佈局視口的寬度設定為理想視口(分辯率)的寬度
3. user-scalable來控制使用者是否可以通過手勢對頁面進行縮放。該屬性的預設值為yes

rem佈局

rem是指根元素（root element html）的字型大小，我們知道 em 的計算是基於父級元素的，計算起來複雜很不方便。所以 rem 的出現使得我們不用再擔心父級元素的 font-size 了，因為它始終是基於根元素（html）的。

核心思想：根據html（根元素）的 font-size 大小通過媒體查詢的方式來調整字號達到適配螢幕

1 首先設定html的font-size:100px；100px方便後面的計算

2 通過媒體查詢的方式來調整字號

其他的螢幕也以此類推就好。

結束總結：

1. 如果不設定 meta viewport，移動裝置上的預設寬度就會為750px，1024px等等，實際上市面上的手機解析度也就320、375、411幾種。viewport遠大於解析度寬度。這裡的寬度所用的單位px都是指css中的px，它跟代表實際螢幕物理畫素的px不是一回事。