移動端適配之必知必會

 

建議你們先去看看這篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension（來自掘金：ConardLi）

 

這裏針對這篇文章提幾個建議而已：

1. 使用 pt 單位， pt：磅，相信用過 word 編輯文檔，尤爲作論文時應該深有體會吧，並且打印機也是用的 pt 作單位先將文件轉換成 pt 單位的尺寸後再打印的，縱然有必定的歷史緣由，可是若是你用像素來打印顯然沒有 pt 的清楚，全部編輯文檔通常要求使用 pt(磅)作單位，便於打印更清晰。

pt 和像素的換算爲 3：4，咱們只須要將設計稿的尺寸按照 px(像素) 進行換算成 pt 便可。

使用 百分比、vw、vh 進行佈局，pt 進行元素設置，什麼 border 1px、border-radius、字體模糊(較新的手機基本不會)，圖片大小啊通通解決。兼容性也不用懷疑，pt 是 CSS2.0 的標準規範。（下面圖片截取自 MDN）。

 

2. 移動端若是在 webView 中的頁面的話，部分版本的 webview 上頁面超出部分會將 webview 撐開，即便你使用了  overflow: hidden; 。

3. IOS 上不支持 last-child 的選擇器，以及部分webview上 nth-last-child 貌似也不支持, 若有必要得經過 js 去進行最後一個子元素的設置。

4. 圖片依然應該準備多套，用於不一樣的像素比的設備，可是建議至少是 2x 比例的，由於如今沒有多少 1 倍像素比的手機，存儲圖片是應當考慮到像素比的問題存儲至少 2x、3x、4x 的幾個比例。

5. 動畫使用 svga 格式，可是應減小同屏中使用的數量，由於 svga 對性能消耗比非壓縮資源高。svga 雖然好，若是對動畫質量要求很是高，應該 lottie 動畫（讓原生去作）或者原生嵌入動畫視頻並將其轉換成服務地址形式供你調用。

6. 若是對於屏幕橫屏有需求但不切換佈局的，若是使用 vh 或 vw 可能致使內容大小突變，建議改爲 vmin 或 vmax。可是必定要注意 vmin 和 vmax 的具體場景的值，建議設置好  html { height: 100%; }  便可。

7. 針對於 劉海屏、美人尖、潛望鏡等屏幕的適配，上面文章提到了 iphone 怎麼設置，可是 Android 沒有提供，只能本身去設置了。