【設計方案系列】設計方案系列--如何設計移動端屏適配方案

1、前言

在衆多的移動設備中，前端開發人員如何在不一樣屏幕大小，不一樣程度的高清屏下去百分百的還原設計稿，歷來都不是一件簡單的事情，須要考慮衆多因素，權衡利弊，作出取捨，結合需求去選擇最合適的方案。

以前有一篇：如何設計移動端高清方案

2、面對的問題

在不一樣大小和高清的屏幕下：

（1）如何保證 頁面佈局的一致性：不錯亂，不變形；

（2）如何保證 字體大小的一致性：大屏顯示更大，小屏顯示更小或者更多；

（3）如何保證 1px的邊框一致性：不一樣的高清屏也能正常顯示1px的高度；

（4）如何正確 圖片清晰度一致性：不停大小和高清屏下都能看到清晰的圖片。

若是把這幾個問題按重要程度排序的話，我想應該是這樣的：
佈局 > 字體大小 > 1px邊框 > 高清圖

3、佈局

方案一：百分比佈局

使用子元素在父元素下的百分比爲單位，使用子元素在不一樣屏幕下寬度表現一致。利用img標籤的特性，只設寬度等圖片加載完，這種方法會致使大量的重排，而且非固定高度會致使懶加載等功能難以實現。

缺點：

（1）寬度是能夠隨屏幕適應，可是高度不能，寬屏會被拉伸，具體表現爲，iphone4中看到的是正方形，而在iphone6s中會看到長方形。

（2）須要手動計算子元素在父元素下的百分比，計算麻煩。

（3）百分比的大小每每須要精確到小數位6到8位。

方案二：媒體查詢調整

一、一種是結合百分比或者flex佈局，對特定的模塊在特定的屏幕寬度範圍內作調整。

二、另一種是結合rem，對不一樣的屏幕寬度範圍內的設備設置不一樣的rem參照字體大小。

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

缺點：

沒法徹底適配到android設備的各類屏幕，沒法保證顯示的一致性。好比：定義了一個模塊的高度是321至375下是40px，那麼這個模塊在這個範圍內顯示的就是40px，而不是隨着屏幕變化而變化的。

方案三：flex佈局

相似於百分比佈局，無需計算百分比，能夠很好的適配到全部屏幕，手機天貓就是典型的flex佈局，flex作了很好的兼容處理，高度寫死，可查看頂部搜索欄的源碼。

缺點：

一、有着和百分比同樣的缺點，高度不便於調整。

二、有幾種不一樣的flex標準，在低端ios和安卓中有着各類兼容性問題。

方案四：使用rem單位

和上面幾種佈局方案結合使用，主要是作高度調整，保證佈局一致。

視口不縮放使用rem

分析：

一、根據圖片能夠看出網易爲750的設計稿，由於750下是html字體大小是100px，這樣在切圖時，方便px轉rem，750設計稿上是大小是50px，那麼轉換成rem就是.5rem(如：24px -> .24rem);

二、px轉rem簡單方便；

三、沒有作1px高清屏處理；

四、未作圖片高清處理。

視口縮放下使用rem

分析：

一、設計稿750的

320 dpr=1 font-size=32px
320 dpr=2 font-size=64px
375 dpr=2 font-size=75px
414 dpr=3 font-size=124.2px

換算規則：（屏幕寬度*dpr）/10 (除以10是爲了把屏幕分爲10份。爲了未來替換成vm或者vh單位方便)

二、屏幕根據dpr的值進行了相應的縮放；

三、很好的還原了1px高清屏真實度；

四、圖片使用了750px下的兩倍圖，並無作按dpr的值加載不一樣的圖片；

五、px轉rem須要使用工具轉換。

方案五：使用vw

面對的屏幕的分辨率，DPR，1px，2X圖等一系列問題，再也不是使用hack手段處理，而是使用原生的css技術處理。在flexible方案中經過js模擬vw特性，如今vw已經獲得衆多瀏覽器的支持，直接使用vw單位在適配的佈局中。

vw是viewPort的視窗的長度單位，這裏視窗指的是瀏覽器可視化的區域，而這個可視化區域是window.innerWidth/window.innerHeight的大小。

涉及到單位：vw，vh，vmin，vmax。

vw：是viewPort width的簡寫，1vw = window.innerWidth的1%；

vh：相似，1vh = window.innerHeight的1%；

vmin：是當前vw和vh中較小的值；

vmax：是vw的vh中較大的值；

目前出視覺設計稿，咱們都是使用750px寬度的，從上面的原理來看，那麼100vw = 750px，即1vw = 7.5px，咱們能夠根據設計圖中的px直接轉換成對應的vw值，又要開始計算，咱們可使用postcss的插件postcss-px-to-viewport，咱們直接寫px，postcss編譯以後就是咱們須要的vw。

實際是喲女的時候，咱們能夠進行相關參數配置

"postcss-px-to-viewport": {
    viewportWidth: 750,
    viewportHeight: 1334, 
    unitPrecision: 5, 
    viewportUnit: 'vw', 
    selectorBlackList: [], 
    minPixelValue: 1, 
    mediaQuery: false 
}

哪些地方是可使用vw來適配的？

（1）容器適配，可使用vw；

（2）文本適配，使用vw；

（3）大於1px的邊框，圓角，陰影均可以使用vw；

（4）內距和外距，可使用vw；

解決retina下的1px方案，依舊是使用postcss插件，postcss-write-svg，使用postcss-write-svg你能夠經過border-image或者background-image兩種方式來處理。

.example { 
    border: 1px solid transparent; 
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
    //或者使用background-image
    //background: white svg(square param(--color #00b1ff));
 }

這樣PostCSS會自動幫你把CSS編譯出來：

.example { 
border: 1px solid transparent;
 border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
 // background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

還須要在head中添加

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

4、我理解的最佳實踐

一、用戶體驗要求很高的頁面，如UV較高的頁面，活動頁這些應該以用戶體驗優先，使用vw是實現頁面的適配，經過postcss-px-to-viewport把px轉換成vw；更好實現長寬比(針對img，video，iframe)，經過postcss-aspect-ratio-mini插件實現；爲了解決1px的問題，使用post-write-svg，自動生成borde-image或者background-image的圖片。

注意：px轉換成vw，多少會存在必定的像素偏差，沒法徹底整除。

二、在其餘頁面，股東視口，不縮放，使用rem作佈局適配，js添加屏幕標識以便調整字體大小，使用@2x圖片，只作ios8+的1px處理

5、參考

一、https://www.w3cplus.com/css/v...

二、http://coderlt.coding.me/2016...