rem移動端適配

admin發表於2018-07-23
REM

關於移動端適配更多內容可以參閱移動端web適配方案詳解一章節。

下面單獨介紹一下如何實現rem實現各種規格移動端適配效果。

關於rem的基本用法可以參閱CSS3 rem一章節。

一.基本適配方案：

rem以html根元素字型大小為參考，當前絕大多數瀏覽器html預設字型大小為16px。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
#antzone {
  width:10rem;
  height:5rem;
  background-color:green;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("antzone");
  odiv.innerHTML = odiv.offsetWidth;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

沒有顯式設定html的字型大小，所以預設是16px，那麼1rem=16px，10rem=160px。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
html {
  font-size:18px;
}
#antzone {
  width:10rem;
  height:5rem;
  background-color:green;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("antzone");
  odiv.innerHTML = odiv.offsetWidth;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

將html字型顯式設為18px，那麼1rem=18px，10rem=180px。

不同規格移動端裝置適配，通常選定一個裝置作為基準，比如iphone6，裝置寬度（device-width）為375px。

（1）.首先給HTML設定font-size字型大小，值通常是device-width/10，等同於：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
window.innerWidth  / 10

（2）.然後根據切圖將px轉換為rem，手動計算比較繁瑣，可以通過SCSS實現：

[Scss] 純文字檢視 複製程式碼
@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}

於是，當我們轉換具體數值的就可以直接呼叫函式即可：

[Scss] 純文字檢視 複製程式碼
height: px2rem(160px);
width: px2rem(80px);;

（3）.前兩部完成的程式碼可以適配iphone6，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
html {
  font-size:37.5px;
}
#antzone {
  width:10rem;
  height:5rem;
  background-color:green;
  text-align:center;
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

程式碼雖然簡單，足以說明問題，div的寬度是375px，恰好鋪滿整個螢幕，能夠適配iphone6。

對於其他規格的移動裝置呢，原理是一樣的，例如iphone4，它的裝置寬度是320px，那麼可以通過JavaScript動態計算並設定html字型大小為32px，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width, user-scalable=0"/>
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
#antzone {
  width:10rem;
  height:5rem;
  background-color:green;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let docEl = document.documentElement;
  docEl.style.fontSize = window.innerWidth / 10 + "px";
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

很簡單頁面佈局的rem資料不變，該10rem還是10rem，唯一改變的就是1rem所表示的畫素數。

特別說明：

（1）.之所以將裝置寬度除以10，主要目的是為了不至於font-size值過大，當然也可以不除。

（2）.html的font-size值通過JavaScript動態計算而來：

[JavaScript] 純文字檢視 複製程式碼
let docEl = document.documentElement;
docEl.style.fontSize = window.innerWidth / 10 + "px";

二.rem適配進階：

使用rem為單位進行適配的目的是為了得到一個與螢幕寬度相關的單位，比如1rem=device-width/10，1rem等於十分之一螢幕寬度。其實vw更加合適，考慮到瀏覽器相容問題，所以當前（2018-2-13）普遍採用rem進行適配，不過隨著軟硬體的更新，可以嘗試使用vw替代rem，具體參閱vw移動端適配一章節。

前面的rem適配是將設計稿的標註除以2，比如750px寬的設計稿，然後統一除以2。當前高清螢幕已經普及，dpr值大多是2或者3，那麼可以完全按照設計稿的尺寸來設定，淘寶就採用此種型別適配方案（flexible.js）。

實現過程簡單介紹如下：

（1）.通常以750px作為標準制作設計稿。

（2）.完全按照設計稿的尺寸製作頁面。

（3）.與上面方案類似，html的font-size也是通過JavaScript動態計算而來：

[JavaScript] 純文字檢視 複製程式碼
let docEl = document.documentElement;
docEl.style.fontSize = window.innerWidth / 10 + "px";

視口根據dpr事先進行縮放，例如iphone6的dpr=2，那麼縮放1/2，window.innerWidth原本值是375px，縮放後變為750px，所以html的font-size計算值為75px，於是實現了適配。如果裝置是iphone4，dpr=2，window.innerWidth原本值是320px，縮放後變為640px，所以html的font-size計算值為64px，最終也實現了適配。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/23/233038une3yiec3jjnooik.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

字型大小設定：

元素的尺寸單位使用rem，但是字型大小依然推薦使用px，加入750px設計稿的字型大小是12px，但是縮放0.5之後，視覺上只有6px的大小，很明顯是不合理的，所以要根據螢幕dpr進行一下適配：

[CSS] 純文字檢視 複製程式碼
.a{
  font-size:12px;
}
[data-dpr="2"] .a{
  font-size: 24px;
}
[data-dpr="3"] .a{
  font-size: 36px;
}

flexible.js優點：

（1）.清晰度高，能達到物理畫素的清晰度。

（2）.由於1px css畫素用1px物理畫素表示，那麼實現了高清屏1px邊框效果。

（3）.向後相容較好，即便螢幕寬度增加、PPI 增加該方案依舊適用。

說明：安卓機採用dpr=1處理，因為安卓機規格複雜，甚至沒有devicePixelRatio屬性，或者返回值比較怪異。

完整程式碼如下：rem移動端適配1518544569552427.rar

相關文章