移动端开发 rem 单位使用问题
前言
PC 端頁面開發與移動端頁面開發：
PC 端頁面開發需要考慮更多的兼容性問題，ie、谷歌、火狐等瀏覽器各自內核不同（ie 的天下）。
移動端頁面開發基本不用考慮這種瀏覽器間的兼容問題，手機上的瀏覽器絕大部分是webkit內核的（webkit 的天下），但是需要考慮屏幕分辨率。
原生開發與移動端開發：
原生 app，在瀏覽體驗上優于網頁，需要依賴具體設備，一旦更換設備，需要重新下載才能繼續使用。
移動端開發，不需依賴具體設備。
GitHub地址
一、常用單位
px：
相對長度單位,像素 px 是相對于顯示器屏幕分辨率而言的。
%：
根據父元素的倍數來計算。
em：
根據父元素的 font-size 值來計算，如果沒有給父元素設置 font-size ,就使用根元素的 font-size。
例：當父元素的 font-size 為 20px 時，子元素:
font-size: 1em => 20px font-size: 2em => 40px ... 復制代碼rem：
根據根元素的 font-size 值來計算。
不同于 em，父元素的 font-size 不管設置為多少，都不會影響到 rem 的值，只有根元素(html)能影響他的值。
若根元素(html)沒有設置 font-size，則值的計算方式與 em 相同。
例：當根元素(html)的 font-size 為 10px 時，子元素:
font-size: 1rem => 10px font-size: 2rem => 20px ... 復制代碼再來一個例子：
為了方便計算，我們改一下瀏覽器默認 font-size，瀏覽器默認 font-size 是 16px，16px = 100%，所以 1px = 6.25%，10px = 62.5%。
此時我們將 html 元素也就是瀏覽器默認 font-size 設置為 62.5%，也就是 10px，如果用 rem 為單位，rem 值 = 元素 px / 10。
例如寬高都為 100px 的 div，使用 rem 為單位寬高便是 10rem。
二、移動端適配方案
- 媒體查詢。
- js 動態設置 html 的 font-size（rem 為單位）。
- 淘寶提供的解決方案 flexible.js（rem 為單位）。
方式一：
媒體查詢。
優點：
- 方法簡單，成本低，移動和 PC 維護同一套代碼。
- 只用修改 css 文件。
缺點：
- 代碼量大，維護不方便。
- 為兼顧大屏或高清設備，會造成其他資源浪費，特別是加載圖片資源。
- 為了兼顧移動端和 PC 端各自響應式的展示效果，難免會損失各自特有的交互方式。
方式二：
js 動態設置 html 的 font-size（rem 為單位）。
1、設置 meta viewport 屬性
<meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 復制代碼2、添加動態設置 html 的 font-size 的 js：
rem.js
(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if (clientWidth >= 640) {docEl.style.fontSize = '100px';} else {docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';};};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); 復制代碼在以下兩處設置設計稿的寬度：
使用說明：例如設計稿的寬度是 640px，如果一個元素的實際寬高都為 200px，那么如果使用 rem 為單位，寬高便都為 2rem。
rem = px / 100。
參考實例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title>rem 使用</title><script src="rem.js"></script> </head><body><div class="box"><p>在 640px 的設計稿下：</p><p>width: 200px => 2rem</p><p>height: 200px => 2rem</p><p>font-size: 14px => 0.14rem</p></div> </body><style> .box { font-size: .14rem; width: 2rem; height: 2rem; background-color: #cacaca; } </style></html> 復制代碼方式三：
淘寶提供的解決方案 flexible.js，這個解決方案只解決蘋果設備上的 dpr 為2和3的情況，不考慮安卓設備也不考 pad。
1、設置 meta 標簽。
<meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta content="telephone=no,email=no" name="format-detection" /> <meta content="maximum-dpr=2" name="flexible" /> 復制代碼2、引入 flexible.js 文件。
計算方法:
元素的 rem 值 = 元素在設計稿中的 px 值 / （設計稿寬 / 10）。
例：一個元素的寬高為 100px ，該元素寬高的 rem 值 = 100 / （ 640 / 10）= 1.5625 rem。
這樣的計算方式會比較浪費時間，如果使用 flexible.js 方式，我建議使用 sublime 插件：CSSREM（在我的文章 代碼編輯器Sublime_Text3的使用 中有 sublime 插件安裝方法），把 px 轉換為 rem，或使用其他方式轉換。
CSSREM 插件安裝成功后，依次打開 Preferences → Package Settings → cssrem → Settings-Default 去設置設計稿的寬。
- px_to_rem ：px 轉 rem 的單位比例，默認為40，如果是640的設計稿，設置為64。
- max_rem_fraction_length：px 轉 rem 的小數部分的最大長度，默認為6。
在 .css 文件中（該插件僅在 .css 文件中生效），編寫 px 值后會自動轉換為 rem 的值。
參考實例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="yes" name="apple-touch-fullscreen" /><meta content="telephone=no,email=no" name="format-detection" /><meta content="maximum-dpr=2" name="flexible" /><title>flexible 使用說明</title><script src="flexible.js"></script> </head><body><div class="box"><p>在 640px 的設計稿下：</p><p>width: 200px => 3.125rem</p><p>height: 200px => 3.125rem</p><p>font-size: 14px => .21875rem</p> </div><style> .box { font-size: .21875rem; width: 3.125rem; height: 3.125rem; background-color: #cacaca; } </style></body></html> 復制代碼三、補充
關于 dpr(設備像素比)。
dpr(設備像素比) = 物理像素 / 設備獨立像素。
在不同的屏幕上（普通屏幕 VS retina 屏幕），css 像素所呈現的大小（物理尺寸）是一致的，不同的是1個 css 像素所對應的物理像素個數是不一致的。
在普通屏幕下，1個 css 像素 對應 1個物理像素（1:1），在retina 屏幕下，1個 css 像素對應 4個物理像素（1:4）。
計算方式是在水平或垂直方向上，一個物理像素中可以放兩個 css 像素，此時 dpr = 2 / 1 = 2。
例：在一個 dpr = 2 的設備中，如果一張圖片的實際寬高都是 200px，在瀏覽器中設置寬高 200px 時，在手機中就會顯示模糊，因為在 dpr = 2 的設備下，圖片的寬高被擴展成了 400px，但是如果 css 把寬高設置為 100px， 在設備下寬高就會擴展為 200px,此時就為原圖大小了。
這就是為什么設計師做移動端時會出兩倍寬度的設計稿，比如 320 的分辨率會出 640 的設計稿。
期待您的關注！
總結
以上是生活随笔為你收集整理的移动端开发 rem 单位使用问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： capistranorb
- 下一篇： java七大设计原则