當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动端开发 rem 单位使用问题

發布時間：2025/6/15 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端开发 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 屬性

2、添加動態設置 html 的 font-size 的 js：

rem.js

在以下兩處設置設計稿的寬度：

使用說明：例如設計稿的寬度是 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 標簽。

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 单位使用问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

单位
rem