先上成果
靜態(tài)預(yù)覽鏈接：https://xianjiezh.github.io/animating-pikachu/
動(dòng)態(tài)預(yù)覽鏈接： https://xianjiezh.github.io/animating-pikachu/animating-version/
代碼鏈接： https://github.com/xianjiezh/animating-pikachu
實(shí)測(cè)靜態(tài)鏈接可以兼容各種常見尺寸的屏幕
為什么說是使用Node 的scss？
答： 因?yàn)閟css 和 sass 是 ruby 社區(qū)發(fā)明的工具，所以官方文檔會(huì)要求裝一個(gè)ruby，但是 ruby 是后端語言、甚至國內(nèi)都用的很少，所以，有人把 scss 做出了一個(gè) Node 的版本
幾個(gè)表示長度的單位
px：像素，屏幕內(nèi)最小的一個(gè)顏色塊，具體的寬度由屏幕所決定，不同的屏幕上1個(gè)px所代表的寬度不同
em ：一般的說法是一個(gè)m的高度或者一個(gè)漢字的高度
vh、vw：viewport height，viewport width，視口的高度或?qū)挾龋?00vh就等于視口的高度
rem ：root em ，根元素的font-size， 根元素就是html，在css里面指定html標(biāo)簽的font-size，就可以在后面使用rem作為單位，一個(gè)rem就等于html里面的font-size；如果沒有在html里面指定rem，那么它默認(rèn)是16px。
使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html{
font-size: 60px;
}
p{
font-size:2rem;
}
</style>
</head>
<body>
<p>韓韓</p>
</body>
</html>
這樣，p標(biāo)簽里面的字體就是120px
需要注意，一般不要給字體設(shè)置小于12px；因?yàn)椴煌臑g覽器有時(shí)它的字體最小最能設(shè)置到12px，小于12px會(huì)按12px算
rem做手機(jī)自適應(yīng)方案
1. SCSS 是做什么的？
css這種編程語言 沒有 if ... else 和 for 循環(huán)，函數(shù)等一般的編程語言都有的東西，只能想填空一樣對(duì)盒子們進(jìn)行排列順序，SCSS是一些后端rails（一個(gè)后端框架）社區(qū)發(fā)明的比較寫css的方法，在這里面，可以實(shí)現(xiàn)其他正常的編程語言都有的東西
2. 怎么使用
如果搜索中文的資料，那么，可能是無法學(xué)會(huì)SCSS的，因?yàn)榇蟛糠种形馁Y料都是過時(shí)的，他們甚至?xí)屇闳グ惭bruby（一種后端語言），這里我使用的是node 的SCSS
只需要幾句命令就可以了
步驟如下：
在命令行里面（cmd、gitbash或者其他系統(tǒng)自帶的終端）依次輸入一下命令：
-
* npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
因?yàn)閲鴥?nèi)的眾所周知的原因，連接到外網(wǎng)時(shí)速度會(huì)比較慢，這句命令是讓下載 SCSS的地址改變到淘寶上 -
touch ~/.bashrc
~/.bashrc 是設(shè)置命令行系統(tǒng)的文件，生成這樣的一個(gè)文件 - 輸入
start ~/.bashrc（window下）或open ~/.bashrc（其他正常系統(tǒng)下），然后選擇一款編輯器打開，輸入export SASS_BINARY_SITE="export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass](https://npm.taobao.org/mirrors/node-sass)"， 讓SCSS的源也指向淘寶 -
source ~/.bashrc，讓剛才的改動(dòng)生效 -
npm i -g node-sass，安裝 node-sass， 會(huì)自帶scss、或者是scss是sass的升級(jí)版 - 可以使用了 ， 新建兩個(gè)文件 style.scss 和style.css，我們把代碼寫在 style.scss 里面，讓工具翻譯寫的scss 格式的文件，然后 輸出成css文件
- 命令是
node-sass style.scss style.css, 前面是scss文件，后面是翻譯出來的css文件，node-sass style.scss style.css可以隨時(shí)監(jiān)聽這個(gè)scss文件的改動(dòng)
3. SCSS代碼的格式
如下
$designWidth : 380;
@function px( $px ){
@return $px / $designWidth * 10 + rem;
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: #ffe600;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.main-wrapper{
width: 100%;
height: px(200);
position: relative;
.nose{
width: 0;
height: 0;
border-radius: 50%;
border: px(13) solid red;
border-width: px(13) px(14);
border-color: black transparent transparent transparent;
position: absolute;
top: px(20);
left: 50%;
transform: translateX(-50%)
}
// 省略 n 多代碼
}
可以看到，這個(gè)會(huì)讓css的代碼更有規(guī)律，在維護(hù)的時(shí)候不需要到處找選擇器了，甚至，它有點(diǎn)兒像組件的寫法，每個(gè)section之可以是獨(dú)立的
并且在上面有一個(gè)函數(shù)來根據(jù)設(shè)計(jì)稿給定的尺寸生成 rem 值，這個(gè)就是自動(dòng)適應(yīng)不同屏幕的原理
此外，在使用時(shí)，需要HTML 文件里面寫這樣的代碼
<script>
let pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth / 10 + 'px;}</style>')
</script>
這段代碼是獲取屏幕的寬度，并且將其縮小成合適大小 生成一個(gè) rem 的值，scss文件里面的 px 函數(shù)里面的px函數(shù)里面的 * 10 跟這邊的 / 10 是可以抵消的
為什么兩邊都要用10來抵消一下，直接用原來的值不行嗎？
答：不行，因?yàn)橛械慕Y(jié)果算出來是 一個(gè)小數(shù)，比如0.123px，那么，瀏覽器會(huì)自動(dòng)忽略有的數(shù)，造成誤差，除以10可以減少這樣的誤差
只要上面的命令行在工作中，每次寫完scss里面的代碼，保存一下，就會(huì)自動(dòng)更新 css 里面的代碼
在測(cè)試pc的兼容時(shí)，發(fā)現(xiàn)圖片嚴(yán)重變大，原因是一開始是根據(jù)手機(jī)端做的頁面，手機(jī)端是 屏幕寬度比 高度 小很多，而pc端是高度比寬度小很多，后來在script標(biāo)簽里面的代碼上加了一寫代碼就可以了
<script>
let pageWidth = window.innerWidth
if(pageWidth > 800){
pageWidth = 800
}
document.write('<style>html{font-size:' + pageWidth / 10 + 'px;}</style>')
</script>
當(dāng)屏幕寬度大于800像素時(shí)，獲取的pageWidth 就一直等于 800，這樣可以兼容常見的筆記本的屏幕
此外，手機(jī)端最好使用border-box，因?yàn)檫@樣在算寬度的時(shí)候就不用擔(dān)心 因?yàn)閎order和padding的寬度而反復(fù)計(jì)算了，只需要計(jì)算某個(gè)元素總體的寬度就行
