對於一個前端的初學者來說，首先要做好的事就是切頁面了，切頁面不得不說的就是佈局了，佈局的重要性不言而喻，為了良好的使用者體驗，提出了許多不一樣的佈局：響應式佈局，彈性佈局，流動佈局等等，也流入出了許多的框架。最近在看關於移動端的響應式佈局，其中涉及到比較多的就是大小屬性的設定：px、vw、vh、%、em、rem等等，今天自己就捋一捋rem的用法。
說在前面
一想到寫移動端的頁面，就要考慮自己寫的頁面能夠適應各種不同的移動裝置，起初想想要做到感覺好難啊，最初想到的就是用第三方的框架，用別人寫的東西應該會很方便。然而萬一不能用該怎麼辦啊，所以還是要學會自己寫原生的頁面佈局，也就會有今天的這篇文章了。先看看自己用普通百分比、畫素來寫的頁面和後來改用rem寫的頁面的對比：
普通百分百佈局與rem佈局的比較
- 小解析度（375*667）
- 小解析度（414*736）
- 大解析度
簡單的對比下就看出了效果。當不用別人的框架，該怎麼去寫。最容易想到的就是用百分比來寫，這種寫法對裝置的寬度有用，寬度是固定的，對高度不起什麼作用，大部分人的做法就是寬度用百分來設定，高度用px來設定，但這種的做法體驗並不是很好，用解析度小的裝置感覺不是很差，一旦換成了解析度比較大的裝置效果就差很多了，大部分的標籤元素都會被拉伸。高度固定，換成了大的解析度各種元素效果還是原來的，各種元素固定了大小，體驗並不是很好。
rem的使用
rem是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位，通過根元素進行適配的。
- 普通使用
大部分是通過設定html的字型大小就可以控制rem的大小，例如：html的字型大小為20px，那麼就說20px為1rem，接下來的所有元素的大小都基於這個比例來換算。這種的演算法是存在問題的，當我們計算頁面的寬度rem值得時候都是使用某一款移動裝置的解析度來計算的，下面的例子我用的是iphone6的解析度375*667，它的寬度為375px，20px為1rem，那麼375px就是18.75rem。看下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--<script type="text/javascript" src="js/rem.js" ></script>-->
<title></title>
<style>
html{
font-size:20px;
}
*{
border: 0;
padding: 0;
margin: 0;
}
#box1{
width: 18.75rem;
height: 7.5rem;
float: left;
background-color: red;
}
#box2{
width: 18.75rem;
height: 7.5rem;
float: left;
background-color: #00FFFF;
font-size: 0.6rem;
}
#box3{
width: 18.75rem;
height: 17rem;
float: left;
background-color: #B22222;
}
#box4{
width: 18.75rem;
height: 20rem;
float: left;
background-color: #BFBFBF;
}
#box5{
width: 18.75rem;
height: 22rem;
float: left;
background-color: cadetblue;
}
#input1{
width: 80%;
height: 2rem;
float: left;
border-radius: 2rem;
margin-left: 1.5rem;
margin-top: 0.6rem;
}
</style>
</head>
<body>
<div id="box1">
<input type="text" id="input1" />
</div>
<div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
<div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
<div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
<div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
</body>
</html>
複製程式碼上面的程式碼在375*667的解析度下剛好能夠佔滿寬度，當你切換到其他的解析度（如414*736）時問題就來了，看圖：
這個問題的原因很簡單，這種寫法即使用的是rem也起不來作用，寬度和高度都是固定的，width為18.75rem就是375px，切換成其它解析度（如414*736），它的寬度還是375px，空白處還是顯示出來了，很多人會認為可以把寬度設定成百分比的形式，或者用媒介查詢@media,或是viewport設定中的那個deviceWidth（）的方式來解決問題，當然這些方式均能解決寬度的問題，然而高度的問題又該怎麼辦呢？看下面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<!--<script type="text/javascript" src="js/rem.js" ></script>-->
<title></title>
<style>
html{
font-size:20px;
}
*{
border: 0;
padding: 0;
margin: 0;
}
#box1{
width: 100%;
height: 7.5rem;
float: left;
background-color: red;
}
#box2{
width: 100%;
height: 7.5rem;
float: left;
background-color: #00FFFF;
font-size: 0.6rem;
}
#box3{
width: 100%;
height: 17rem;
float: left;
background-color: #B22222;
}
#box4{
width: 100%;
height: 20rem;
float: left;
background-color: #BFBFBF;
}
#box5{
width: 100%;
height: 22rem;
float: left;
background-color: cadetblue;
}
#input1{
width: 80%;
height: 2rem;
float: left;
border-radius: 2rem;
margin-left: 1.5rem;
margin-top: 0.6rem;
}
</style>
</head>
<body>
<div id="box1">
<input type="text" id="input1" />
</div>
<div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
<div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
<div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
<div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
</body>
</html>
複製程式碼看效果：
看圖就知道了，寬度可以適應不同的移動裝置，然而高度一直都沒有發生變化，一直都是150px，頁面效果並不好看，解析度大了，頁面被拉伸，高度顯得變小了。
- 正確使用
動態計算html的font-size，核心是切換不同移動裝置通過js獲取裝置寬度，然後按比例計算html的font-size的值，動態變化。
var d = document.documentElement;//獲取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
複製程式碼上述程式碼解釋：
- 設計稿橫向解析度為375（iphone6），計劃20px為1rem；
- 佈局的時候，各元素的css尺寸= 20 * （裝置寬度/設計稿豎向解析度）。
完整程式碼：
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'),
(function() {//判斷是螢幕旋轉還是resize
function c() {
var d = document.documentElement;//獲取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
}
c();
return c;
})(), false);
複製程式碼上面的做法就可以動態的設定各種標籤元素的寬和高，按比例的除錯適應不同的移動裝置。例如下： 上面的程式碼中是以iphone6為設計稿的，box1的height為7.5rem(150px)，如果切換成iphone6 plus的大小，box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px，與iphone6時的高度是不一樣的，寫頁面時會更加的美觀。看效果：
看上面顯示的效果就可以看出來，和計算出的結果是一樣的，方法正確。以後可以用了。看看整體效果：
頁面元素完全沒有被拉伸的效果，按照一定的比例縮放，保持頁面效果美觀。