响应式开发

响应式开发所需的主流技术点
如何沟通设计稿
使用构建工具搭建项目
多种页面测试工具的使用

分析设计图
做方案设计

单位：
主角像素（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：

O`U%S640Q41F)PY0TA}ZICS.png

7U{9LZ11JADCCWQ8@~VG5D4.png

安卓：

LN5WX[}4K[%1]@3PMBYJ7]I.png

安装：

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