REM 適合移動開發的自適應方案

先來認識幾個常見單位：

vh：viewport height，視窗高度，是指佔整個瀏覽視窗高度的百分數。

vw：viewport width，視窗寬度，是指佔整個瀏覽視窗寬度的百分數。

em：乙個大寫字母m的寬度（有時候也說乙個漢字的寬度，但其實是錯的），多少em是指大寫字母m的寬度的倍數

而rem（root em），理解過來是指根元素（標籤）中的font-size，雖然rem中有em但是這裡兩個單位沒有任何關係，這裡需要特別注意。

舉個例子，chrome預設字型大小為16px，如果不設定html,所以在這時1rem就是16px，

首先兩者什麼關係都沒有！

em是指自身的font-size的倍數，這裡舉個例子

html

由於解析度不統一，不同品牌不同裝置的螢幕顯示比例不同，移動端開發需要做適配的話只能使用等比例放大縮小來進行（這裡不考慮響應式，只是在接近的解析度中進行比較）。

如果想通過縮放來顯示內容，就必須與顯示的寬度（innerwidth）有關係。但是像上面的說的，這幾個單位除了vw之外都和顯示寬度沒有關係。然而，vd目前瀏覽器相容性很差，別說手機，就是電腦瀏覽器都有些不相容。因此，就有人想出使用js來獲取顯示寬度進行設置。只需要在html頁面中，載入css檔案之前新增以下**

>
document.
write
(`htmlpx;
}<
/style>
)； script
>

在此之後可以利用1rem=innerwidth來進行布局，這個時候1rem=100vd。如果覺得小數太小了寫著不方便也可以取font-size==｛doucment.innerwidth/10｝,注意，這裡不要用100的，因為有的瀏覽器會設定最小字型，比如chrome瀏覽器預設最小為12px，當設定小於這個值的時候會不生效

當使用rem的時候不影響其他的單位使用，有時候考慮到以rem為單位的換算成px可能不到一畫素，這個時候還是使用px為單位。

REM 適合移動開發的自適應方案

REM 適合移動開發的自適應方案

移動端自適應方案 rem布局

rem絕對自適應方案

REM 適合移動開發的自適應方案

REM 適合移動開發的自適應方案

移動端自適應方案 rem布局

rem絕對自適應方案

相關推薦