1.meta viewport
通過在 HTML head標(biāo)簽上加入 上圖代碼，來實(shí)現(xiàn)手機(jī)適配，注意：做手機(jī) 頁面一定要加上這段代碼。
上圖content 代表的是 設(shè)備寬度。user-scalable 為頁面縮放，等于NO，就是不準(zhǔn)用戶縮放。
上面代碼 可以 有效防止手機(jī)頁面模擬980像素寬度，防止頁面在用戶雙擊的時(shí)候放大，防止用戶兩指縮放頁面。
不加 獲取到的頁面寬度
加上 獲取到的頁面寬度
2.媒體查詢
允許內(nèi)容的呈現(xiàn)針對(duì)一個(gè)特定范圍的輸出設(shè)備而進(jìn)行裁剪，而不必改變內(nèi)容本身。
上面代碼 意思就是 媒體最大寬度 為800是（0-800），該媒體 背景顏色為 紅色。
利用 這一 便利性，可以實(shí)現(xiàn) 當(dāng) 媒體條件滿足移動(dòng)端適配條件 時(shí)添加移動(dòng)端 樣式，滿足PC端時(shí)添加pc端樣式.
3.動(dòng)態(tài) rem 方案
借助js實(shí)現(xiàn) 比例適配，
借助上面這段js代碼 實(shí)現(xiàn)適配， 因?yàn)?rem 等于 html font-size大小，所以 讓html font-size等于頁面寬度，
然后適配的時(shí)候 寫 零點(diǎn)幾 rem 布局適配 。
?在scss里使用PX 自動(dòng)轉(zhuǎn) REM
下面代碼配置 node-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 文件就會(huì)自動(dòng)得到 css 文件
在 scss 文件里添加
@function px( $px ){
? @return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫。如果設(shè)計(jì)師的設(shè)計(jì)稿寬度不統(tǒng)一，就殺死設(shè)計(jì)師，換個(gè)新的。
.child{
? width: px(320);
? height: px(160);
? margin: px(40) px(40);
? border: 1px solid red;
? float: left;
? font-size: 1.2em;
}
即可實(shí)現(xiàn) px 自動(dòng)變 rem
