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