Dpr：
Dpr的全称（Device pixel ratio）像素设备比例：就是说每个设备像素上占有的css位像素的个数
苹果手机常见的设备像素比：1.0安卓 iPhone2.0 3.0
如果是1.0 设计稿的宽度是多少，我们就写多少，如果是2.0 我们所写的宽高，字体，等等都要是设计稿的一半（为了适配）
ppi：是设备像素密度（设备每个单元格，所占有的像素的数目）密度越大，图片越高清；
设备像素（物理像素）iPhone5以下，物理像素320，iPhone6 物理像素375 iPhone plus系列 414 安卓：物理像素 320 360 480居多
css像素（位像素/逻辑像素/pad文件上的像素）
情景分析：写一张轮播，width320px 在1.0下 设计师就要提供320px的就可以了，但如果在2.0下，就需要一个640的图片；
物理像素：
设备屏幕上的最小显示单元（电子）；
逻辑像素：
可以计算的，看到的屏幕的宽度，iPhone4的物理像素640（硬件设备） iPhone4的逻辑像素320，我们能看到的设备像素比 dpr=物理像素/逻辑像素
设备独立像素：
就是设备屏幕的宽度；
物理像素及设备独立像素的画图解析：
逻辑像素的分析图：
dpr的查看：
我们也可以通过is中window.devicePixelRatio 获取当前设备的像素比 一定是（移动端）
在实际开发中，设计者为了页面的高清，采用物理像素的值进行设计： 常见的设计稿：640x960 640x1136 750x1134;
物理像素值：逻辑像素乘以dpr
如果物理像素是640x1136 ，设计稿的图片320 x 450 怎么解决？
web开发者在开发过程中，除了最外层采用流式布局/弹性布局，里面的宽高，字体大小等；
为什么这样做？
设计图100x100 苹果手机200x200进行渲染，最后有被拉伸模糊效果；
如果非要320x200尺寸做，遇到图片不清，要么要160x100,要么640x400; 如果是720就需要我们使用@media进行微调；
@media可以进行等级划分；
图片分位图和矢量图；
位图：jpg png gif
矢量图：.svg
位图和矢量图的区别？
位图：缩放会影响清晰度；
矢量图：缩放不会影响清晰度；
h5，开发为了减少工作量，我们通通要一张最大的图片
弹性布局
display属性：flex指定父元素为弹性盒模型，内部元素按行排列
flex属性：设置弹性盒的子元素如何分配空间，属性值是数字 例：flex：1；
flex-direction属性：指定弹性盒子中的子元素的排列方式；属性值：row（左到右） row-reserve(右到左) column(上到下) column-reserve(下到上)
justify-content属性：指定弹性盒子子元素在x轴对齐方式； 属性值：center(居中) flex-start(左对齐) flex-end(右对齐) space-between(两边不留空隙) space-around(两边留空袭)
align-items:指定弹性盒子，子元素在y轴上的对齐方式 属性值：center（居中）
flex-wrap：设置子元素，超出父元素换行不换行
order：排列 属性值：数字； 默认值：0 负数向前排列，正数向后排列；
另一种弹性布局方式：（仅供了解）
弹性父级：display：table 表格
弹性子元素：display：table-cell 单元格