移動端適配方案

先來看下目前iphone各個型號尺寸和解析度

我們所能看到的手機端瀏覽器的可視視窗大小

viewport分為三種

layout viewport：布局檢視移動裝置瀏覽器認為自己必須能夠讓所有**都顯示即便那些不是為移動瀏覽器設計的** 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移動瀏覽器設計的**

visual viewport：用來表示瀏覽器可視區域的大小其寬度可以通過window.innerwidth獲取

ideal viewport: 理想檢視使用者不需要放大或縮小頁面也沒有橫向滾動條的檢視起步並不是乙個固定的尺寸

在這裡介紹幾個名詞

裝置畫素：裝置硬體的物理畫素

裝置解析度：裝置硬體所能支援的解析度每個數字代表每個裝置畫素

邏輯畫素：軟體所支援的畫素

邏輯解析度：軟體所能支援的解析度每個數字代表了每個邏輯畫素

在早期3gs時代可以看到裝置解析度是等於邏輯解析度的

但隨著技術發展蘋果推出了retina螢幕

在螢幕尺寸不變的情況下裝置解析度提高了一倍

這時候裝置解析度就不等於邏輯解析度了

也就是在蘋果等高解析度螢幕上乙個邏輯畫素由多個物理畫素所控制顯示

比如 iphone4上乙個邏輯畫素由（640/320）* (960/480) = 4個物理畫素所控制

這樣的話每個邏輯畫素的顯示能力得到了提公升相當於原來乙個格仔面積被分成了四個格仔每個格仔可以顯示不同的顏色

直觀感受就是螢幕更加清晰

css畫素：在css檔案中使用的px是乙個相對單位比如css中的1px 控制顯示的是1邏輯畫素每個邏輯畫素則由不同的物理畫素控制

dpr（device pixel ratio: number of device pixels per css pixel）: 裝置畫素比也叫***x 就是乙個css畫素控制幾個物理畫素

ppi: 畫素密度（pixel per inch）單位面積含有的物理畫素個數

math.sqrt(750750 + 13341334) / 4.7 = 326ppi

dpi:含義相同於ppi 表示單位面積上含有的邏輯畫素個數

由此我們可得公式：物理解析度/邏輯解析度（css解析度）= dpr；

iphone6的dpr = 750/375 = 2;

iphone6+的dpr = 1242/414 = 3;

但是問題又來了

在6+上常常使用的是10801920的裝置解析度而不是12422208的解析度

dpr=2.6 並不是3

這個問題目前大家也都是在猜測

在6p上也常常使用三種顯示方案：

a.物理畫素：12422280 邏輯畫素：414736 dpr：3

b.物理畫素：10801920 邏輯畫素：360649 dpr：3

a.物理畫素：10801920 邏輯畫素：540960 dpr：2

現在較流行的方案是b方案具體討論可以看

另外 dpr用js也可以取到的就掛載在window.物件上 window.devicepixelratio

3.meta標籤

**以顯示網頁的螢幕寬度定義了視窗寬度。網頁的比例和最大比例被設定為100%。

這個標籤特別重要，基本上移動端頁面都離不開這個標籤，後面會講到它。

總結來說

現在移動端進入了雜屏時代各種尺寸的螢幕都有各種解析度的螢幕都有開發移動端頁面更多需要在螢幕尺寸相容方面研究

附：市場上全螢幕尺寸表（需翻牆）

附：手淘團隊適配協作模式圖

目前行業內流行幾種適配方法：

js根據螢幕動態計算使用js判斷頁面寬度算出頁面應有的font-size

**查詢使用**查詢來相容不同尺寸螢幕設定不同尺寸下的rem大小

vw vh css3中的新尺寸單位但是在安卓上相容較差

flex布局 css3中提出的新布局方案移動端的相容性較好

在實際中，多是以上方案結合使用。

上述幾種方案，提出了乙個重要的概念：

使用rem作為移動端尺寸單位替代px

現在問很多人移動端適配方案的時候，他們都會說使用rem布局，或者是百分比布局。

既然rem布局深入人心，那麼有個問題：

1rem=?px

rem表示根節點html節點的font-size，其字型的大小決定了該頁面rem的大小。

經過一段時間的觀察發現，rem等於多少有很多方案，常見的有三種：

1rem=16px；這個是預設的大小。

1rem= 75px；這個是手淘團隊在flexible方案中在iphone6中的顯示結果。flexible方案核心就是根據螢幕的dpr和尺寸，動態算出當前頁的rem大小，動態的修改meta標籤。該方案目前也被應用在手淘首頁中。

1rem=100px；這個是阿里旗下的螞蟻金服在ant-mobile中的方案；（當然很多公司也才用也採用此方案，因為100px比較好運算）ant-mobile也有自己高畫質解決方案，其核心跟flexible類似。現應用於ant-mobile中。

三種方案中，第二種flexible方案最出名，應用最廣，也相對成熟，github。

公司目前專案中使用的是1rem=16px方案，使用該方案的頁面在不同尺寸的螢幕上的相容性顯示不算很優秀，使用起來換算也很麻煩，但是還能滿足現有需求。

但是最近需要使用ant-mobile外掛程式，外掛程式使用了螞蟻的高畫質方案，該方案是1rem=100px，跟我們目前的頁面很不相容：比如他們定義的div高度是100px，換算成他們的方案就是1rem，但是在我們者就是16px，太小了，完全不相容；

所以考慮了一下，決定換掉我們的方案。

在寫css之前，考慮以後會面臨的問題：

現在是16px轉75px，萬一有一天不用ant外掛程式了，轉flexible布局怎麼辦？

所以需要乙份原檔案，上面尺寸嚴格按照標誌圖來。原檔案根據當前的rem編譯成rem布局css，在專案中使用。以後換了rem方案，只需把原檔案換rem參考標準，生成新的css檔案使用。

這裡px轉rem的工具有幾種：

可以使用sass函式和混合巨集

@function px2rem($px, $base-font-size: 75px)  to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px);
} @else if (unit($px) == rem) 
@return ($px / $base-font-size) * 1rem;
}

也有現成的npm外掛程式px2rem

sass檔案中的px 直接使用px 經過編譯和postcss會生成rem的css供頁面使用

// input h1 // output

h1

如果某天專案裡不使用ant了轉flexible

直接使用flexible和px2rem-postcss外掛程式

這樣只需修改引用外掛程式和一些配置檔案

而原始檔sass則不需要改變

最大限度的保證更換成本

@mixin font-dpr($font-size)
[data-dpr="2"] & 
[data-dpr="3"] & 
}

flexible的px2rem會自動處理

div 
[data-dpr="2"] div 
[data-dpr="3"] div

以上是提供現在移動端流行的適配方式

原有的16px=1rem的適配方式沒毛病但是不相容外掛程式以及手淘的flexible更具有說服力

所以選擇更換方案。

關於移動端rem布局的總結

css3的rem設定字型大小

使用flexible實現手淘h5終端適配

從**布局適配談移動端布局適配

移動端適配方案

移動端適配方案

移動端適配方案

移動端適配方案

相關推薦