Web 端屏幕適配方案

基礎知識

像素相關

一、像素 ：像素是屏幕顯示最小的單位。

二、設備像素 ：設備像素又稱物理像素（physical pixel），設備能控制顯示的最小單位，咱們能夠把這些像素看做成顯示器上一個個的點。 iPhone5 的物理像素是 640 X 1136 

三、邏輯像素（logical pixel）：獨立於設備的用於邏輯上衡量像素的單位。CSS 像素就是邏輯像素，CSS 像素是 Web 編程的概念。

四、設備獨立像素（density-independent pixel）：簡稱 dip ，單位 dp ，獨立於設備的用於邏輯上衡量像素的單位 。且邏輯像素 ≈ 設備獨立像素。

五、設置像素比（device pixel ratiodpr）：dpr = 物理像素 / 設備獨立像素。可經過 window.devicePixelRatio 獲取。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個 CSS 像素即：幾 dpr。普通 Android 是一倍屏，在 Retina 屏的 iPhone 上，devicePixelRatio 的值爲 2，也就是說 1 個 CSS 像素至關於 2 個物理像素。一般所說的二倍屏（Retina）的 dpr 是 2， 三倍屏（IPhoneX 等）是 3 。

viewport 相關

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

1. visual viewport 可見視口 ：屏幕寬度window.innerWidth/Height
2. layout viewport 佈局視口 ：DOM寬document.documentElement.clientWidth/Height
3. ideal viewport 理想視口 ：使佈局視口就是可見視口
4. width=device-width ：表示寬度是設備屏幕的寬度
5. initial-scale ：表示初始的縮放比例
6. minimum-scale ：表示最小的縮放比例
7. maximum-scale ：表示最大的縮放比例
8. user-scalable ：表示用戶是否能夠調整縮放比例

總結現有方案優劣

現有屏幕適配方案 ：

• 設置 viewport 的 scale 值爲 1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 根據屏幕的分辨率動態設置 html 的文字大小，達到等比縮放的功能

375 屏幕爲 20px，以此爲基礎計算出每一種寬度的字體大小

　　Rem.less 中設置其餘基礎尺寸 @bps ：320px， 360px， 375px， 400px， 414px， 480px， 768px， 1024px

• 並計算相應的比例縮放：

 

.loop(@i: 1) when (@i <= length(@bps)) {  //注意less數組是從1開始的
 @bp: extract(@bps, @i); @font: round(@bp/@baseWidth*@baseFont, 1);
  @media only screen and (min-width: @bp){ html { font-size: @font !important; } } .loop((@i + 1)); };

• 而後在 variables.less 中設置比例和行高：

@2ptr : 1/2/20rem @ptr : 1/20rem

• 最後全部 CSS 使用 @2ptr 和 @ptr 利用 rem 縮放 dom 、字體

其餘主流適配方案優劣

方案：

1. 媒體查詢 Media Queries

@media screen and (max-width: 300px){}

• 優勢：
  • Media Queries 能夠作到設備像素比的判斷，方法簡單，成本低，特別是對移動和 PC 維護同一套代碼的時候。目前像 Bootstrap 等框架使用這種方式佈局
  • 圖片便於修改，只需修改 CSS 文件
  • 調整屏幕寬度的時候不用刷新頁面便可響應式展現
• 缺點：
  • 代碼量比較大，維護不方便
  • 爲了兼顧大屏幕或高清設備，會形成其餘設備資源浪費，特別是加載圖片資源
  • 爲了兼顧移動端和PC端各自響應式的展現效果，不免會損失各自特有的交互方式

2. Flex 彈性佈局

• 固定 viewport 的高度等於設備高度，寬度自適應，元素都採用 px 作單位

<meta name="viewport" content="width=device-width,initial-scale=1">

• 隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體佈局差很少，在哪一個寬度須要調整的時候使用響應式佈局調調就行（好比網易新聞）

• 優勢：佈局更加精簡，直接用 CSS 的方式，你不用再引入 Bootstrap ，使用柵格系統
• 缺點：IE10 及 IE10 以上才支持，因此目前主要應用在移動端上

3. rem + viewport

• 根據屏幕寬度設定 rem 值，須要適配的元素都使用 rem 爲單位，不須要適配的元素仍是使用 px 爲單位

• 根據 rem 將頁面放大 dpr 倍， 而後 viewport 設置爲 1 / dpr

  如 iPhone6 plus 的 dpr 爲 3， 則頁面總體放大 3 倍， 1px (css單位)在plus下默認爲 3px (物理像素)

• 而後 viewport 設置爲 1/3， 這樣頁面總體縮回原始大小，從而實現高清。這樣整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是 device-width 。這個 device-width 的計算公式爲：
  設備的物理分辨率 / (devicePixelRatio * scale)，在 scale 爲 1 的狀況下，device-width = 設備的物理分辨率 / devicePixelRatio

rem弊端

    iOS 與 Android 平臺的適配方式背後隱藏的設計哲學是這樣的：閱讀文字時，可讀性較好的文字字號行距等絕對尺寸數值組合與文字所在媒介的絕對尺寸關係不大。（能夠這樣簡單理解：A4 大小的報紙和 A3 大小甚至更大的報紙，溫馨的閱讀字號絕對尺寸是同樣的，由於他們都須要拿在手裏閱讀，在手機也是上同理）。在看圖片視頻時，圖片、視頻的比例應該是固定的，不該該出現拉伸變形的狀況。而 rem 用在字號時，使字號在不一樣屏幕上的絕對尺寸不一致，違背了設計哲學。

瀏覽器兼容

• 不支持 IE 8.0 如下 、Safari 4.0 如下、FireFox 3.5如下

4. VW適配

如何在Vue項目中使用vw實現移動端適配

vw 能夠輕鬆搞定彈性佈局，流體佈局。vw 邏輯很是清晰其實 vw 的方案的寫法和 flexible 方案的寫法一致
～～由於 flexible 其實就是用 hack 的手段模擬了 vw 的實現而已。
具體寫法：針對 750px 的設計稿，將相應的 px 值除以 75 就是 vw 的值。

使用 vw 來實現頁面的適配，而且經過 PostCSS 的插件 postcss-px-to-viewport 把 px 轉換成 vw 。這樣的好處是，咱們在擼碼的時候，不須要進行任何的計算，你只須要根據設計圖寫 px 單位。postcss-px-to-viewport 插件主要用來把 px 單位轉換爲 vw 、vh 、vmin 或者 vmax 這樣的視窗單位，也是 vw 適配方案的核心插件之一。

爲了更好的實現長寬比，特別是針對於 img、video 和 iframe 元素，經過 PostCSS 插件postcss-aspect-ratio-mini 來實現，在實際使用中，只須要把對應的寬和高寫進去便可。

• 優勢：rem ，使用 vw 和 wh 是很是直觀的，讓其餘人看到就能知道，該界面是以怎麼樣的結構進行佈局，利於維護
• 缺點：vw 在一些三星的機子會有兼容問題，致使失效，以及不一樣瀏覽器兼容問題