dpr,ppi,dip,viewport的一些概念

一 ppi,dpr,dip,分辨率,屏幕尺寸,設備物理像素，設備獨立像素

分辨率：1920px*1080px 在這個設備上縱向上有 1920個像素點（色塊）...

屏幕尺寸：5英寸(in) = 5*2.54(cm) 指的是在這個屏幕上對角線的長度使用英寸單位 這個值是每一個設備固定不變的

像素密度ppi: ppi和dpi 指的是一個設備上每英寸長度上有多少個像素點 ppi = 對角線上的像素數量/尺寸

設備像素比dpr: 指的是一個設備上的 物理像素和獨立像素的比值 dpr = 設備像素/設備獨立像素(css像素)
dpr = 設備像素/CSS像素 = 設備像素 / 設備獨立像素 ~= PPI/160 = 頁面縮放比例
根據dpr能夠判斷 一個 css像素表明多少個設備像素點 1:1, 2:1 一個css像素表明4個物理像素
3:1 一個css像素表明9個物理像素

設備像素(物理像素) : 指的就是設備的 分辨率 大小

設備獨立像素(邏輯像素) dip: 指的是 css的像素 ideal viewport (dip)設備獨立像素 === css像素 === 邏輯像素

二 css單位：px,em,rem,vw,vh:

px: 相對單位 根據dpr 相對設備物理像素的 數量
em: 相對單位 根據父元素的字體大小，相對父元素的字體大小成倍
rem: 相對單位 根據根目錄html的字體大小，相對html元素字體大小成倍
vw,vh: 相對單位 根據每一個設備的屏幕大小，寬和高，相對屏幕分紅100份 100vw,100vh爲滿屏

三 viewport虛擬視窗

1.layout viewport
　　默認虛擬視窗爲980px
　　document.documentElement.clientWidth和-Height能夠獲取layout viewport的尺寸
2.visual viewport
　　可視的視窗相對於 ideal viewport縮放
　　window.innerWidth/Height來獲取visual viewport的尺寸
3.ideal viewport
　　ideal viewport的寬度等於移動設備的屏幕寬度(即設備邏輯像素)，跟設備的物理寬度沒有關係
　　ideal viewport的寬度 = 屏幕的邏輯像素寬度

4.縮放因子： 　　相對於ideal viewport來縮放的 　　縮放改變的是 每CSS像素單位表明的物理像素長度，而設備像素保持不變 　　zoom factor = ideal viewport width / visual viewport width