响应式开发所需的主流技术点
如何沟通设计稿
使用构建工具搭建项目
多种页面测试工具的使用
分析设计图
做方案设计
单位：
主角像素（pixel）
设备像素（物理像素）：
独立像素
总结：
像素不绝对是取样
讨论像素要看语境
设备像素设备管
逻辑像素随你配
样式像素看比例（dpr，也就是设备像素比）
PPI （像素密度）
样式像素（DPR）
逻辑像素（可以调）
视口：
概念：可视区域
种类：
理想视口（设备提供没法调整，窗口最理想的宽度，如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（页面的缩放级别）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；
}
总结：
理想视口设备给
布局视口最听话
视觉视口不算啥
视口标签要牢记
两组属性width大
媒介查询
调试方法及工具
1：真机
2：远程云调试【百度MTC、优测（推荐）、阿里云移动测试平台】
3：多真机同步调试【GhostLab（推荐）、Remote Preview、Adobe Edge Inspect】
真机debug方法：
ios：
安卓：
安装：
npm -g install weinre
启动：
weinre
重置样式
reset.css
模拟器调试：
autoprefixer【补全兼容前缀插件】
cssnano【css压缩插件】
postcss结合其它预处理器使用
https://www.cnblogs.com/gyjWEB/p/5047607.html
webpack
介绍：是一个打包、构建、开发工具
1：npm i webpack --save-dev
2：明确构建目的
3：编写构建文件webpack.config.js
4：执行构建
![]4`J1GXYTQ{3W_F_6TOVBY.png
