適配（移動端+web端）

移動端

什麼是手機適配？

手機適配：設計獅製做效果圖，程序猿把效果圖應用到不一樣的手機，對不一樣的屏幕進行界面調整的過程，確保界面不變形，呈現效果圖的位置、尺寸、比例。

1、屏幕尺寸、屏幕分辨率、屏幕像素密度

• 屏幕尺寸：指屏幕的對角線的長度，單位是英寸，1英寸=2.54釐米，常見的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。因此6.0的手機 6*2.54 = 15.24 釐米。
• 屏幕分辨率：指在橫縱向上的像素點數，單位是px，1px=1個像素點。通常縱向像素 * 橫向像素來表示一個手機的分辨率，如1960 * 1080。（這裏的1像素指的是物理設備的1個像素點）。好比（iphone6 750 * 1337） （iphone6plus 1960 * 1080）
• 屏幕像素密度/像素密度/屏幕密度：：屏幕上每英寸能夠顯示的像素點的數量，單位是ppi，即「pixels per inch」的縮寫。屏幕像素密度與屏幕分辨率有關。

2、物理像素，CSS像素

• 設備像素/物理像素：（分辨率）買手機的時候有一個nxm的分辨率，那是屏幕的nxm個呈像的點，一個點（小方格）爲一個物理像素。它是屏幕能顯示的最小粒度。設備像素也被稱爲物理像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。任何設備的物理像素的數量都是固定的。
• CSS像素：CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（肯定）Web頁面上的內容。它是爲web開發者創造的，在CSS或者JavaScript中使用的一個抽象的層。通常狀況下，CSS像素被稱爲與設備無關的像素（device-independent像素），簡稱爲「DIPs」。在一個標準的顯示密度下（普通屏），一個CSS像素對應着一個設備像素。
• CSS像素與物理像素的關係：一個width爲200px的元素，它佔據了200個CSS像素，但200個CSS像素佔據多少個物理像素取決於屏幕的特性（是不是高密度，即像素比）和用戶的縮放行爲。在蘋果的視網膜屏幕中，視網膜的像素密度是普通屏幕的兩倍，這個元素就跨越了400個設備像素，若是用戶放大，它將跨越更多的設備像素。固然如今好多手機的像素比變得愈來愈大，好比我以前用的魅族手機和如今用的iphone 8 plus都已經達到了3，因此這個元素正常狀況下就跨越了600個設備像素。
• 設備獨立像素：設備獨立像素（也叫密度無關像素），能夠認爲是計算機座標系中的一個點，這個點表明一個能夠由程序使用的虛擬像素（好比：CSS像素），而後由相關係統轉換爲物理像素。
• 位圖像素：一個位圖像素是柵格圖像（如：png，jpg，gif等）最小的數據單元，至少1個位圖像素對應1個物理像素，圖片才能獲得完美清晰的展現。

對於Web開發者而言：咱們使用的每個CSS和JavaScript定義的像素本質上表明的都是CSS像素，咱們在開發過程當中並不在乎一個CSS像素到底跨越了多少個設備像素。咱們將這個依賴於屏幕特性和用戶縮放程度的複雜計算交給了瀏覽器。

3、像素比

• 像素比：它的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是devicePixelRatio = 物理像素/獨立像素（window.devicePixelRatio）

  

  iphone5

  

  iphone6 plus

4、視口

• 佈局視口：在PC端上，佈局視口等於瀏覽器窗口的寬度。
• 視覺視口：視覺視口是用戶正在看到的區域。用戶能夠縮放來操做視覺視口，而不影響視覺視口的寬度。視覺視口決定了用戶看到了什麼。

5、UI界面設計和適配尺寸規範（iphone5 iphone6 iphone6Plus）

若是以iphone5s 爲基準設計稿，適配iphone6 或者是iphone 6 plus的方法和技巧。

當舊的iPhone 5程序運行在iPhone 6上面，假如沒有通過適配。舊程序自動等比放大，鋪滿新手機，舊程序也能夠正常運行。這種方案可算是自動適配。但由於舊程序拉伸了，總體看起來有點虛，也不能更好利用大屏空間。

一套設計稿適配的前提：設計稿必須爲矢量的。圖片除外。好比圖標，線、點、顏色塊等元素都是矢量或者形狀。

分爲兩步走：

若是是一些常規界面：好比以文字、列表爲主的界面，大部分是指佈局相對簡單的界面。不用設計師怎麼切圖的界面，這些基本可讓ios程序員完成適配便可。顯示效果也不會太差。

若是是一些定製界面：此時設計師應該手動爲大屏幕從新調整設計。另外設計一些大圖或者是大的圖標，以知足適配iphone6.或者iphone plus

前提是大家的ios程序員須要瞭解蘋果公司的一個工具：Auto Layout

Auto Layout （Auto Layout Guide: Introduction），能夠理解成 iOS 上的 CSS，若是設計師用 Auto Layout 提供的排版語言描述出 UI 佈局，那不一樣尺寸的 iPhone 只要同一份設計稿就能夠了。

總之：適配iPhone 6/6Plus UI界面設計的要點：

一、針對iphone6 能夠用高度不變，橫向拉伸。或者等比拉伸

二、全矢量做圖。

三、定製界面或圖片位圖必須額外製做大圖。

四、工具欄、狀態欄、導航欄的高度規範和設計字體大小等均以2:3的比例放大便可。

五、iphone的5/5S/6/6P的屏幕比例爲9：16，因此比例這個問題如今不是很大，但因 Plus增長橫版顯示，因此建議對於一些用戶量較高的軟件進行重繪。

以下圖所示：

給app設計師9點建議

• 一、之後的應用程序，都使用AutoLayout, 不要再用絕對定位。

• 二、使用相似網頁的方式來設計界面。

• 三、設計師好，程序員也好，儘可能使用點這個單位進行思考，而不要使用像素。好比，你須要作44 x 66個點的按鈕，2x模式，就乘以2, 3x模式就乘以3。這樣的思考方式能夠大體估計到真實的物理長度。44個點，就是手機上導航欄，工具欄的高度。假如用像素思考，容易使得作出的圖片過大或者太小。

• 四、非矢量素材，就能夠作尺寸最大的，以後再進行縮小。好比你須要兼容3x的屏幕，就直接作最高那種圖片。

• 五、而當使用Flash之類的矢量工具來作素材的時候，應該直接作點那個尺寸。好比44 x 66個點的按鈕。就創建一個44 x 66的場景。以後再導出成2倍圖，3倍圖，由於矢量放大不失真。不要創建一個3x的場景，導出成大圖片，再進行縮小，這樣就容易失真。更理想的是直接使用矢量圖。

• 六、假如是那種導航欄，工具欄之類的背景圖，須要橫跨整個屏幕。能夠只切一小塊，讓程序拉伸，拉伸方式是保持兩邊的像素不動，只拉伸最中間的一列像素。須要拉伸的話，橫方向就不要出現一些漸變色。

• 七、按鈕的點擊區域，不該該少於44像素，就算按鈕的圖片看起來比較小，也應該使得點按鈕周圍的透明區也有反應。

• 八、能夠按照你當前最方便測試機子的型號來作一些主要預覽圖，效果圖。好比你手頭有iPhone 5，能夠按照iPhone 5的尺寸，320 x 568個點，須要兼容iPhone 6 Plus，就使用3x的模式。這樣方便將圖片放進手機裏面看實際的效果。有多個測試機，就選較大的，以後再進行一些細調。假如支持iPhone 6 Plus的橫屏模式，須要另外處理。

• 九、上面說的是應用的處理方式，遊戲會有些特殊。如今不少遊戲，按照1136 x 768的像素尺寸來設計場景，這樣能夠同時兼容iPad和iPhone，並只使用一份圖。iPad 1x模式下尺寸是1024 x 768像素，iPhone 6在2x模式下，是1136 * 640。這種尺寸，能夠簡單將場景居中顯示，各自將場景拉伸到最大。

web端

目前咱們pc項目的設計稿尺寸是寬度1920，高度最小是1080。

適配目標：

• 1.在不一樣分辨率的電腦上，網頁能夠正常顯示

• 2.放大或者縮小屏幕，網頁能夠正常顯示

對於寬度的適配：

首先設置html,body{width:100%;overflow-x:hidden;} 而後咱們能夠把頁面分解爲背景層和內容層，對於背景層，咱們通常都要求徹底鋪開，對於內容層咱們保證咱們的內容都封裝在盒子內，而後margin:0 auto;保持居中顯示，盒子裏面的內容，咱們再另外調整 （內容區定寬，在達到某個斷點以後更改內容區的寬度，並把某個內容顯示/隱藏）

對於高度的適配：

通常狀況下，頁面都比較高，咱們經過給每一個模塊設置具體的高度值來作頁面，而後頁面會出現導航條，咱們能夠拉動導航條來瀏覽，可是有的頁面的需求是主體內容直接在不一樣的瀏覽器上都能完整顯示，不經過導航條來瀏覽

如何作？

一、百分比的應用

百分比的應用在於主視角的定位和縮放，百分比的取值以原設計稿的尺寸爲標準。什麼意思呢？舉個栗子，一個元素在原設計稿裏，量出來距離頂部是 200px，若是寫死多是top:200px 或者margin-top:200px,如今要轉成百分比，那麼這個值可能就是23.3%。這個值怎麼算？若是設計稿是 1080，200/1080=18.51%這樣計算出來百分比的值。

可是，有個地方要注意，流體佈局下，百分比的值是根據父層計算的；absolute佈局的元素是根據最近的relative父層計算的；fixed佈局的元素是根據window的可視區域計算的。

因此，若是要達到適配的效果，不僅是當前元素須要用百分比值，其參考計算的元素也是要動態變化的。

另外還有一個就是圖片縮放的問題，pc不少主視角都是切圖的，可是pc不能直接用background-size。在pc咱們能夠直接經過img標籤來插入圖片，經過設置 img寬度爲100%，高度auto，而後讓它根據父層來等比縮放來實現。

二、js監測

須要js主要有兩個緣由：

上面說了，百分比是要有父層作參照物的，那麼若是父層都用百分比，那就是最終是根據window來參照的，由於pc絕大部分都是寬屏設備，並且他們的比例是不一致的，咱們來計算下(190是減去瀏覽器工具條、window桌面條、咱們頁面通用頂條)：

設計稿：1920/(1080-190) = 2.16

14寸普通筆記本：1366/(768-190) = 2.36

因此，咱們不能寬高都100%按照屏幕尺寸來計算。另外考慮到主要是高度對pc頁面的主視角影響比較大，咱們須要藉助js來計算肯定一個最小高度臨界值（固然這個能夠用css的min-height來實現）；

另一個是，經過js判斷最小高度臨界值，再加上這個最小臨界值的class，爲了處理那些特殊的佈局或者百分比沒法徹底解決適配的元素，好比字體的相關佈局