移動端適配rem vw

對於做移動端開發的同學來說，最為重要的一點是如何適配頁面，實現多終端的相容，不同的適配方式各有千秋，也各有缺點。目前主流的有響應式布局和彈性布局。

響應式布局通過**查詢配置多個響應斷點，布局在響應斷點範圍內的解析度下維持不變，而在響應斷點切換的瞬間，布局會有斷層式的切換變化

通過採用rem單位動態計算的彈性布局，一般做法是在頭部內嵌一段指令碼來進行監聽解析度的變化來動態改變根元素字型大小，使得css和js耦合在了一起

利用視口單位實現適配的頁面，是既能解決響應式斷層問題，又能解決指令碼依賴的問題的

rem(font size of the root element)是css3新增的相對長度單位，是指相對於根元素html的font-size值的大小

先簡單介紹一下rem布局。使用rem布局的前提是頁面元素的布局尺寸全都以設計稿為基準等比例設定。當頁面中所有元素都使用rem單位時，你只需要改變根元素font-size值，所有元素就會按比例放大或者縮小。

而基於rem的彈性布局又以**和網易對移動web適配方案為代表，具體做法可以參考這篇博文從網易與**的font-size思考前端設計稿與工作流

計算裝置畫素比，dpr=物理畫素/css畫素

根據裝置畫素比，將頁面寬乘以裝置畫素比，然後去計算rem，這樣頁面所有元素都會是正常的2倍

然後通過meta標籤的viewport對頁面進行縮放，使得頁面恢復正常

根html的font-size值 = 螢幕寬度*裝置畫素比/10

以iphone6 375為例，1rem = 375 * 2 / 10 = 75px

然後在專案裡寫px，通過外掛程式轉化成rem，在瀏覽器上檢視的時候會看到一堆小數值的rem單位。

根據螢幕寬度與設計稿寬度的比值作為font-size 大小，但此時計算出的font-size值小於12px會造成一些錯誤和奇怪的問題，因此把比例擴大100倍，即：

根html的font-size值 = 螢幕寬度/設計稿寬度*100

以iphone6 375為例，1rem = 375 / 750 * 100 = 50px

為了使比例不變，相應的設計圖元素在變為rem的過程中要除以100。這種方式計算起來比較方便，在專案裡也是直接使用rem作為單位。

不管是哪種適配方案，都是以根html font-size為基準，一般的做法都是通過js去動態設定

一般我們修改根元素的font-size大小都是通過在頁面頭部插入一段js**去動態修改

大致**如下

//設定頁面font-size
(function (doc, win)  else 
if (!document.documentelement.style.fontsize) )}};
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
window.onresize = function();
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);

這種方式相容性比較好，但是也存在一些缺點：

動態設定font-size，部分安卓手機不相容，會存在設定失敗的情況（原因未知）

ios同乙個webview，不同鏈結的h5頁面返回的時候，不會自動執行設定font-size的js（往返快取的原因）

vw : 1vw 等於視口寬度的1%

vh : 1vh 等於視口高度的1%

視口單位區別於百分比%單位，視口單位是依賴於視口的尺寸，根據視口尺寸的百分比來定義的；而%單位則是依賴於元素的祖先元素。

以750的螢幕尺寸為例，1vw = 7.5px（這是理論推算的出，如果瀏覽器不支援0.5px，那麼實際渲染結果可能是8px）

最近在做移動端適配調研的時候發現，網易新聞h5和京東h5，設定根元素的font-size都用到了vw

以網易新聞為例，可以看到這樣一段css

html
@media screen and
(max-width
: 320px) }
@media screen and
(min-width
: 321px)
and(
max-width
:360px) }
@media screen and
(min-width
: 361px)
and(
max-width
:375px) }
...@media screen and
(min-width
: 769px)
}

頁面元素的單位則是rem

直接使用vw來實現布局，依賴於視口大小而自動縮放，無論視口過大還是過小，它也隨著視口過大或者過小，失去了最大最小寬度的限制

給根元素大小設定隨著視口變化而變化的 vw 單位，這樣就可以實現動態改變其大小，同時限制根元素的字型大小的最大最小值，配合body加上最大寬度和最小寬度，實現對布局寬度的最大自小的限制

針對之前的rem布局方案來說，改動量很小，只需要增加一段css**，便可以相容之前的布局

以iphone6 375螢幕為例，13.33333vw = 13.33333 * 375 /100 ≈ 50px，而前面說到網易的適配方案，在375的螢幕上的font-size就是50px。與js動態設定font-size得出的基準值是一樣的。而且上面的css**裡還考慮到vw的相容性的問題，使用**查詢寫了降級方案，針對不支援vw的瀏覽器直接使用計算之後的px值。

在很早以前，vw 這個單位就已經被列入w3c規範了，我們可以看一下目前瀏覽器對於vw的支援情況，對於ios safari來說，ios 8 以下不支援；對於android browser來說，安卓4.4以下不支援。整體來看相容性還是不錯的，針對不相容的瀏覽器，也可以用**查詢實現相容處理。

純css方式設定根font-size，不會出現js動態設定font-size失敗的情況，頁面始終可以正常展示

js動態設定的方式下，頁面初始化依賴於js**執行完成。同時需要監聽解析度的變化，去重新計算當前的font-size，使得css與js耦合在了一起。

純css的方式效能體驗較好，css渲染時機優於js，css會在頁面初始化時生成css dom，避免了js設定後的css重新計算

移動端適配rem vw

使用rem vw實現簡單的移動端適配

移動端適配

移動端適配

相關推薦