移動端適配的總結
說起移動端頁面也是老生常談了，最近正好在做金融商城移動端的開發，正好梳理下這一塊的知識點，提煉和總結。
一 什麽是移動端頁面
首先
不扯那些長篇大論，常見的移動端頁面主要就三種，即H5頁面、手機頁面、以及webview頁面。
移動端的興起，訪問的流量很大一部分都來自於手機，而通常當手機訪問頁面的時候，每臺設備的分辨率、型號、屏幕尺寸都不一致，導致移動端的兼容適配成為一個很難忽視的問題。
為了讓設計稿在大部分設備上都能有相對滿意的效果，尤其是在移動端，顯然在pc端的px計算像素的方式已經不適用。
二 幾個名詞
1 viewport
現在開發的頁面主要集中在H5頁面這個方向，而說到移動端頁面，就必須要提到viewport.
先說用到哪，再說是什麽、為什麽這麽用。
隨便打開一個線上的H5的頁面，你都會在head裏發現這個標簽<meata name="viewport" content="initial-scale=..., maximun-sacle=..., minimun-scale=..., user-scalable=no">
金融商城H5端
淘寶移動端
所有的移動端頁面都用到了這個屬性，那麽這個屬性的定義是什麽？
我們知道手機的分辨率各有各的不同，很難做到一套代碼，所有的機型都適配，再加上一些歷史的原因，瀏覽器對移動端的屬性支持力度不同。所以需要一個折中的方法做到絕大多數設備都能適用。
2. 物理像素(physical pixel)
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。
3. 設備獨立像素(density-independent pixel)
設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然後由相關系統轉換為物理像素。
所以說，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比。
4.設備像素比(device pixel ratio)
設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到：
設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向
5.rem
rem 是一個css單位，rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。（這裏的根元素指的是html）
三 幾種解決方案
3.1 通過css3 的media queries，即媒體查詢
這是一個pc的主頁網站，pc和移動端做的統一適配
一般早期手機機型不多的時候采用的方案，原理是通過css3的media queries 的方式查詢設備寬度，來執行不同的css代碼。
這是一段css代碼，在不同的屏幕寬度下設置不同的font-szie.
優點
media query對移動和PC維護同一套代碼的時候，基於bootstrap，適用於一些比較穩定的主站- 圖片修改簡單，只需修改css文件
- 調整屏幕寬度的時候不用刷新頁面即可響應式展示（最大的好處之一）
缺點
- 代碼總量比較大，維護不方便，比較臃腫
- 兼顧大屏幕或高清設備，造成其他設備資源浪費，特別是加載圖片資源，因為css是預讀的，對於首屏加載時間是有影響的，尤其是圖片比較多，需要加上懶加載
- 為了兼顧移動端和PC端各自響應式的展示效果，在做一些效果的時候只能犧牲取折中的方案
- 代碼不夠靈活，手機的機型越來越多，對新的手機做適配難度比較大，改動比較麻煩。
3.2 flex彈性布局
以為天貓h5首頁為例
flex 的原理不在贅述，簡單的說就是把父元素下的盒子分成了幾份，無論屏幕大小，實現等比例的伸縮的一種css3的全新布局方式。
優點
- flex布局簡單易用，作為css3的新屬性，在h5頁面中表現良好，能夠動態的彈性伸縮
- 無需糾結於屏幕的尺寸、像素，等等一些問題
- 代碼易於維護，布局方式簡單、清晰
缺點
- 很抱歉的是，flex兼容性並不好，在某些機型上會有坑，兼容處理比較麻煩
- flex-direction與justify-content、align-items 等屬性在一些特定的情況下 並不好用
3.3 rem + viewport 縮放 （目前金融商城采用的解決方案）
最開始的時候，很多采用的是媒體查詢，但是隨著機型的越來越多，媒體查詢的方式越來越不適用。
rem上邊我們已經介紹過，那麽看看具體怎麽用，這是一個簡單的button，當頁面根元素的font-size改變，頁面整體都會跟著改變，相當於根元素是一個基準或者系數
也很像viewport的這種縮放的方式。
既然描述的聽上去很完美，在不同機型上，直接改變根元素的font-size值或者viewport的縮放比例就可以了，的確之前也有單獨用rem或者單獨用viewport做適配的。
但是，最後老生長談的還是回到了兼容性這個點上，純rem的方式在背景和字體上會存在一些問題，畢竟是基於根元素計算來的，而不是真正的縮放。而viewport的方式在某些
瀏覽器的webview是有兼容性問題的，而且還存在一像素無法渲染的問題。
所以折中的我們采取了rem+viewport縮放的並行方案，根據屏幕的尺寸，動態計算rem的根元素和viewport的縮放比例。
具體代碼的實現：（由於內網安全紅線，代碼示例的部分就省去了）
主要的代碼邏輯：
setViewport部分，主要就是對ios和安卓做了機型的區分，和對是否第一次設置viewport做了判斷。
setRem部分，主要就是根據屏幕的實際寬度設置根元素的font-size
在init函數裏針對一些情況做了單獨的處理
考慮了屏幕發生旋轉、頁面load的時候，重新計算rem
四 總結
布局方式和屏幕適配本來就是前端的一個比較頭疼的問題，在日常的開發中花費掉了開發者大量的精力和時間，尤其是處理一些兼容性的問題。
而適配屏幕的方式也在一直進化和改變，肯定會有新的適配方案來代替現在的方案。
需要勤加總結和學習新的知識，保持自己的更新和叠代。
移動端適配的總結