REM 是什麼
首先了解一下 CSS 中一些常見的長度單位：
- px 絕對長度單位，像素
注意：瀏覽器（Chrome）默認文字大小為 16px，所能設置的最小單位為 12px
- em
相對長度單位，這個單位表示元素的font-size的計算值。如果用在font-size 屬性本身，它會繼承父元素的font-size。
如果元素的 font-size 為 16px，元素的寬度設置為 width = 10em，則 width = 10em = 160px；如果元素父元素的 font-size 為 12px，元素的 font-size 設置為 font-size = 2em，則元素的 font-size = 2em = 24px；
可以通俗並相對不嚴謹地理解為 1em 是一個漢字的寬度。
- REM
相對長度單位，這個單位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。比如根元素的 font-size 為 16px，則 1rem = 16px。
vh 相對長度單位，視口高度的 1/100。
vw 相對長度單位，視口寬度的 1/100。
總得來説，REM 是根元素 font-size 的長度單位，也是移動端適配的解決方案之一。
動態 REM
隨着移動端設備越來越多，尺寸屏幕也大小不一。那麼如何給頁面寫 CSS 呢？以下是幾種移動端適配的方案：
- 給每個設備尺寸定製一套 CSS
缺點：工作量大，不切實際
- 使用響應式
缺點：需要區分多個尺寸區段，開發效率也不高
- 使用百分比佈局
缺點：寬高不好確定
- vw/vh 方案
元素的寬高使用 vw/vh 長度單位，與設備視口寬高關聯
缺點：兼容性有問題
- REM 方案
一切單位以設備寬度為準
使用 JS 把頁面寬度轉化為根元素的 font-size，然後再用與根元素 font-size 相關聯的 rem 單位定義元素寬高，這樣就等於使用了 rem 間接與頁面寬度產生聯繫，確定了比例，從而實現等比縮放。
代碼演示：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
let pageWidth = window.innerWidth
document.write(`<style>html{font-size:${pageWidth/10}px;}</style>`)
</script>這樣的話，當我們需要在屏幕寬度為 720px 的設備上顯示一個寬為 50% 高為 25% 的元素時，我們就可以給這個元素添加樣式：
.ele{
width:5rem; /* 原尺寸360px/根元素font-size72px */
height:2.5rem; /* 原尺寸180px/根元素font-size72px */
}優化 REM
由於換算 px 和 rem 太麻煩，所以可以使用 Scss 函數對 px 單位進行自動換算。
- scss 安裝與使用
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
node-sass -wr scss -o css編輯 scss 文件就會自動得到 css 文件
- px2rem
在 scss 文件裏添加：
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設計稿的寬度，你要根據設計稿的寬度填寫。
// $designWidth : $(window).width() css獲取屏幕寬度
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}即可實現 px 自動變 rem
