1.什么是rem
rem是CSS3引入的一種相對(duì)尺寸單位卢厂，其值等于根元素html的font-size值疾渣。
所謂的相對(duì)漾肮，就是指其錨定于根元素html的font-size值清焕。當(dāng)根元素html的font-size值發(fā)生變化時(shí)，1rem的具體值也會(huì)發(fā)生變化蝠猬。
2.為什么要使用rem布局
為了解決界面在不同分辨率設(shè)備上的適配問題切蟋。下面是一個(gè)簡(jiǎn)單的頁(yè)面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Test</title>
<style>
.box1{
width: 150px;
background-color: #bfa;
text-align:center;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box1">hello world</div>
</body>
</html>
用不同分辨率(375*667 / 820*1180像素)的設(shè)備顯示，效果如下：
可以看到在iPhone中比較合適的內(nèi)容對(duì)于iPad Air來說就顯得有些太小了榆芦。這是因?yàn)轫?yè)面中使用的是固定尺寸單位
px柄粹。我們希望hello world及其所在的方塊在不同的設(shè)備上能夠以相似的比例呈現(xiàn)出來。
3.如何使用rem布局
rem布局匆绣，其實(shí)本質(zhì)上就是等比縮放驻右。所有需要?jiǎng)討B(tài)布局的元素不再使用px固定尺寸，而是采用rem相對(duì)尺寸犬绒。
我們根據(jù)設(shè)備的尺寸用 javaScript 動(dòng)態(tài)計(jì)算出rem換算成px后的值旺入，并調(diào)整body元素的文字大小。
當(dāng)屏幕較大時(shí)凯力，設(shè)置 font-size 為較大值茵瘾，元素就會(huì)變大；當(dāng)屏幕較小時(shí)咐鹤，設(shè)置 font-size 為較小值拗秘，元素就會(huì)變小。
具體步驟如下：
3.1獲取設(shè)備的屏幕的寬度
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
當(dāng)頁(yè)面的內(nèi)容太多無法在一個(gè)屏幕中顯示時(shí)祈惶，我們比較習(xí)慣通過上下滑動(dòng)屏幕或者鼠標(biāo)滾輪讓更多的內(nèi)容顯示出來雕旨，而不是橫向滾動(dòng)條。
所以捧请，我們一般根據(jù)屏幕的寬度來調(diào)整頁(yè)面使其盡可能在橫向上不要超出屏幕凡涩。
3.2設(shè)置根元素html的font-size值(1rem基準(zhǔn)值)
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
代碼中的7.5只是一個(gè)參考值，可以根據(jù)需要自由調(diào)整疹蛉。
3.3設(shè)置body的字體大小
document.querySelector('body').style.fontSize = 0.4 + 'rem'
如果希望自動(dòng)調(diào)整body元素的文字大小活箕，可以使用上面的代碼。與前面一樣0.4也只是一個(gè)參考值可款。
3.4將上面的代碼包裝成函數(shù)育韩，使其在窗口尺寸發(fā)生變化時(shí)調(diào)用
window.onresize = function(){
remSize()
}
完整的代碼如下，為了提高復(fù)用率我們將其包裝成一個(gè)獨(dú)立的js文件闺鲸。
//計(jì)算rem
function remSize(){
//獲取設(shè)備寬度
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
//設(shè)置調(diào)整的范圍在320-750之間
if(deviceWidth >= 750){
deviceWidth = 750
}
if(deviceWidth <= 320){
deviceWidth = 320
}
//750px:1rem=100px 375px:1rem=50px
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
//設(shè)置字體大小
document.querySelector('body').style.fontSize = 0.4 + 'rem'
}
remSize()
//窗口發(fā)生變化時(shí)調(diào)用
window.onresize = function(){
remSize()
}
3.5改寫html中的尺寸單位為rem筋讨，并將js文件引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Test</title>
<style>
.box1{
width: 3rem;
background-color: #bfa;
text-align:center;
margin: 1rem auto;
}
</style>
</head>
<body>
<div class="box1">hello world</div>
<script src="./JS/rem.js"></script>
</body>
</html>
下面是使用rem布局后的效果
