設(shè)備像素
物理像素 , 屏幕上的發(fā)光顏色變化的最小單位
小米4的屏幕闻葵,分辨率是1920設(shè)備像素*1080設(shè)備像素民泵,意味著小米4手機橫向上排列了1080個顯像用的小點,在縱向上排列了1920個顯像用的小點槽畔。
CSS像素
邏輯像素 , 并不真實存在的邏輯單位
PC端設(shè)備像素和設(shè)備獨立像素數(shù)值默認相等
設(shè)備獨立像素
坐標系統(tǒng)中的一個點 , 在不同的系統(tǒng)中有不同的表示 , 由系統(tǒng)轉(zhuǎn)化為物理像素表示
設(shè)備獨立像素已經(jīng)包括了CSS 像素栈妆。
蘋果手機分辨率
單位是 pt
視口
視口在CSS里的定義是<html>元素的包含塊,稱為初始包含塊。它的寬度是所有CSS百分比寬度推算的根源鳞尔。(塊級元素的寬度默認為100%)
在桌面上嬉橙,視口的寬度等同于瀏覽器窗口的寬度,高度即為瀏覽器窗口的高度寥假。
響應(yīng)設(shè)計
通過meta標簽指定布局視口而不是使用默認的市框、寬度通常為980px的布局視口
通過媒體查詢或者document.documentElement.clientWidth來根據(jù)布局視口的寬度的不同來做設(shè)計
通過媒體查詢或者window.devicePixelRatio來根據(jù)DPR的不同來提供分辨率不同的圖像