rem 是根元素(html)的font-size
一般rem會和em進行比較
兩者本質上沒任何關系，如果說有關系的話疤孕，那便是：rem是根元素font-size扎瓶，em是自己的font-size妈拌。
在做手機頁面的時候，不可能做響應式布局的刽沾，因為手機屏幕大小由幾十種，不可能完全用響應式布局排拷，這個時候就要使用到比例布局侧漓。
若是用純比例百分比布局，則會出現(xiàn)寬度按照百分比监氢，高度無法實現(xiàn)布蔗，無法完美還原設計稿，這時候rem就比較適合浪腐。
因為rem既可以實現(xiàn)寬度的比例纵揍，也可以實現(xiàn)高度的比例。而一切以寬度為基準就能保證完美還原設計稿议街。
rem使用
1rem = html font-size = 1 page width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write(`<style>html{font-size:${pageWidth}px</style>`)
</script>
</head>
<body>
1rem = html font-size = 1 page width
</body>
</html>
給HTML標簽好像素px泽谨，那么在寫樣式的時候，只需要給需要的樣式用rem表示寬高即可傍睹。
但是在使用rem的時候隔盛，需要給樣式寫到小數(shù)點以后，這樣比較繁瑣拾稳，比如給<body>標簽fon-size:0.01rem的1%大小時候吮炕，會用到小數(shù)點好幾位，就需要進行轉換下访得。
px轉rem
按照設計稿設計時龙亲，根據(jù)px轉成rem是比較繁瑣的陕凹，所以需要計算好來使用px。
這時候需要進行換算
@function px2rem( $px ){
@return $px*320/$designWidth/20 + rem;
}
$designWidth : 750;
并且通過scss轉成css（因為scss使用比較方便）
- 首先安裝淘寶鏡像：
* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null") - 然后按照
node-sass：cnpm i -g node-sass - 接著就開始創(chuàng)建文件
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss
mkdir css
touch scss/style.scss
touch css/style.css
- 然后開始
node-sass啟動熱加載監(jiān)聽：node-sass --watch scss/style.scss css/style.css監(jiān)聽文件(或者node-sass -wr scss -o css監(jiān)聽文件夾) - 再然后寫代碼
scss/style.scss
@function px2rem( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750; //750 是設計稿的寬度鳄炉，要根據(jù)設計稿的寬度填寫杜耙。
body{
p{
width:px2rem(10); //10px
height:px2rem(10); //10px
}
}
css/style.css
在看css/style.css就變成了
body p {
width: 0.13333rem;
height: 0.13333rem; }
這樣scss里的px就自動變成了css里的rem，
我們只需要根據(jù)設計稿直接填寫像素拂盯，而不需要進行換算了佑女。
