響應(yīng)式開發(fā)所需的主流技術(shù)點(diǎn)
如何溝通設(shè)計(jì)稿
使用構(gòu)建工具搭建項(xiàng)目
多種頁面測試工具的使用
分析設(shè)計(jì)圖
做方案設(shè)計(jì)
單位：
主角像素（pixel）
設(shè)備像素（物理像素）：
獨(dú)立像素
總結(jié)：
像素不絕對(duì)是取樣
討論像素要看語境
設(shè)備像素設(shè)備管
邏輯像素隨你配
樣式像素看比例（dpr挺狰，也就是設(shè)備像素比）
PPI （像素密度）
樣式像素（DPR）
邏輯像素（可以調(diào)）
視口：
概念：可視區(qū)域
種類：
理想視口（設(shè)備提供沒法調(diào)整录煤，窗口最理想的寬度因块，如iphone4s 320px，瀏覽器工具顯示的320X480）、
獲取理想視口：
window.screen.width
http://viewportsizes.com/
布局視口（瀏覽器提供，web工程師使用）
獲取布局視口：
document.documentElement.clientWidth
https://quirksmode.org/mobile/metaviewport/width.html
width=device-width 意味著 布局視口=理想視口
user-scalable（是否允許用戶縮放）yes|no【通常是no】
initial-scale（頁面的縮放級(jí)別）0.0-10.0【1.0不縮放】
minimum-scale（允許用戶縮小到什么程度）0.0-10.0【】
maximum-scale（允許用戶放大到什么程度）0.0-10.0【】
視覺視口（眼睛提供）
初始css
*{
margin：0；
padding：0px嘶朱；
box-sizing：border-box；
border：0px光酣；
}
總結(jié)：
理想視口設(shè)備給
布局視口最聽話
視覺視口不算啥
視口標(biāo)簽要牢記
兩組屬性width大
媒介查詢
調(diào)試方法及工具
1：真機(jī)
2：遠(yuǎn)程云調(diào)試【百度MTC疏遏、優(yōu)測（推薦）、阿里云移動(dòng)測試平臺(tái)】
3：多真機(jī)同步調(diào)試【GhostLab（推薦）、Remote Preview财异、Adobe Edge Inspect】
真機(jī)debug方法：
ios：
安卓：
安裝：
npm -g install weinre
啟動(dòng)：
weinre
重置樣式
reset.css
模擬器調(diào)試：
autoprefixer【補(bǔ)全兼容前綴插件】
cssnano【css壓縮插件】
postcss結(jié)合其它預(yù)處理器使用
https://www.cnblogs.com/gyjWEB/p/5047607.html
webpack
介紹：是一個(gè)打包倘零、構(gòu)建、開發(fā)工具
1：npm i webpack --save-dev
2：明確構(gòu)建目的
3：編寫構(gòu)建文件webpack.config.js
4：執(zhí)行構(gòu)建
![]4`J1GXYTQ{3W_F_6TOVBY.png
