Dpr ppi 适配 等概念 弹性属性的讲解

　　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　　单元格