更多文章
1. 頁面適配
這一點不能算是建議，應該說是解決方案。
最近查了好多關於移動端適配的資料，把人都看懵了，收穫了以下名詞
CSS像素、物理像素、邏輯像素、設備像素比、PPI、DPI、DPR、DIP、Viewport
說實話，我一點都不想了解這些名詞到底有着什麼樣的解釋，只想知道怎麼讓開發的頁面能適配不同的移動端設備。簡單點說，我想知道怎麼獲取設備的真實開發尺寸（根據這幾天查資料所得，這個概念叫邏輯像素）。
例如 iphone 6，它的分辨率是 750 x 1334，真實開發尺寸是 375 x 667（邏輯像素），打開 chrome 控制檯，切換 device toolbar， 選擇 iphone 6 設備就能看到。
蘋果設備大多都能查到它的開發尺寸是多少。但安卓設備不是，沒有這種條件，所以要靠其他手段了。
根據查資料所得，目前有兩種方法可以獲得移動設備的真實開發尺寸。
第一種方法：設備像素比
真實開發尺寸 = 分辨率 / 設備像素比
通過 window.devicePixelRatio 可以獲取設備像素比，例如 iphone 6 的設備像素比是 2，即 分辨率 / 2 = 真實開發尺寸，750 x 1334 / 2 = 375 x 667。移動設備的分辨率隨處可查，看發行參數就知道了，然後再通過瀏覽器獲取設備像素比，從而得知設備真實開發尺寸。
第二種方法
這種方法不需要知道設備分辨率，也不需要知道設備像素比，簡單粗暴。
在頁面建立一個剛好鋪滿全屏的 div 元素，然後獲取它的寬高，這個寬高就是該設備的真實開發尺寸。
.test-div {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: red;
}
document.querySelector('test-div').clientWidth // 寬
document.querySelector('test-div').clientHeight // 高
剛好我手上有一個華爲 m5 平板和華爲 m5 pro 平板，大小分別爲 10.1 寸和 10.8 寸，分辨率爲 1920 x 1200，2560 x 1600。獲取到它們的真實開發尺寸分別爲 960 x 600 1024 x 640，根據分辨率和真實開發尺寸還能得知兩個設備的設備像素比分別爲 2 和 2.5。
如圖所示（華爲 m5）
爲了證明推斷是正確的，我拿了一個專門在 m5 pro 上使用的 app 放在 chrome 上運行（模擬該設備的開發尺寸），完美適配。
另外提一下，爲手機開發的網站放在其他手機上一般都能適配，但是放在平板上很難適配，畢竟屏幕大小差太多了，反之亦然。沒有網站能完美適配所有的端，當然，簡單的頁面還是可以的，不過得寫一堆 @media screen。
2. 相對長度計量單位
在 css 中有很多相對長度，其中常用的有 em rem vw vh，在小程序上有 rpx。
在此，我建議你使用 vw 和 vh 作爲移動端開發的相對單位，包括字體大小、元素寬高、距離等等。
理由如下：
vw vh 換算方便
1vw = 屏幕 1% 的寬度
1vh = 屏幕 1% 的高度
兼容性好
無論是在網頁還是在小程序，只要支持 css 就能完美兼容。
PS：在頁面上有 input 輸入框的時候，不要使用 vh 作爲計量單位，因爲軟鍵盤彈出時會壓縮頁面高度，如果用 vh 作爲計量單位，會導致頁面嚴重變形，此時用 vw 就沒有這個風險了。
固定高度使用 px
像邊框或者分隔線等“固定”高度的，可以使用 px。
3. 柵格化佈局
如果開發的 app 只是應用在手機上，適配一般不會有什麼問題，因爲屏幕大小不會相差很多。但是放到平板上就會有問題，如果計量單位使用的是相對長度，各個元素相對於手機都會變大，導致不美觀。
在這種情況下，我們可以使用柵格化佈局。例如在手機上採取兩列布局，在平板上採取三列布局。另外還要用 @media 根據分辨率來調整元素的大小、字體的大小等等。
PS：如果一個 app 要應用在手機和平板上，相對計量單位建議使用 rem，這樣在手機和平板上可以設置兩個不同的根元素字體大小。
推薦閱讀
4. 儘量使用移動端專用的 UI 組件庫
PC 端的 UI 組件庫在移動端上會有很多樣式 BUG，如非必要，不要使用。
5. 設備狀態欄
如果 app 在移動設備上不需要全屏展示，那麼在 chrome 上模擬設備大小時要減去設備狀態欄的高度。
當然，這一般都不會有什麼問題，只是爲了多加一條建議。