1. 基礎概念
em:一個漢字寬
rem:根元素(<html>元素)的font-size
chrome瀏覽器的font-size預設值16px (注意：最小是12px，再小無效)
rem和em的區別？沒什麼關係
1em = 本身元素的font-size（可以這樣理解，不過不準確）
1rem = 根元素的font-size的大小
2. 動態 rem 方案
由於手機螢幕眾多導致的尺寸不同的問題，我們需要一種自適應方案。
自適應方案可以用百分比佈局 缺點：高度不能和寬度配合。
rem方案是以螢幕寬為基準的方案，通過js動態獲取螢幕的寬度，從而和rem產生聯絡。
var pageWidth = window.innnerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px;'}</style>')
複製程式碼這樣 1rem = html的font-size = 1/10 pageWidth
3. 在 SCSS 裡使用 PX2REM，自動進行rem值換算
利用scss，我們就不用自己手算了，設計稿是多少就寫多少，再將scss檔案轉成css檔案即可。 使用步驟（windows可用，命令列工具是git bash）
- 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 檔案 在 scss 檔案裡新增
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設計稿的寬度，你要根據設計稿的寬度填寫。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
複製程式碼