摘要:設備像素物理像素可以認為是計算機坐標系統中的一個點,這個點代表一個可以由程序使用的虛擬像素比,然后由相關系統轉換為物理像素。在中,用來獲取當前設備的在中可以通過,和進行媒體查詢,對不同的設備,做一些樣式適配這里只針對內核的瀏覽器和。
設備像素(物理像素): 可以認為是計算機坐標系統中的一個點,這個點代表一個可以由程序使用的虛擬像素比,然后由相關系統轉換為物理像素。
屏幕密度:是指一個設備表面上存在的像素數量
CSS像素:是一個抽象的單位,主要使用在瀏覽器上,用來精確度量Web頁面上的內容,css像素稱為與設備無關的像素
設備像素比(device pixel ratio):簡稱為dpr,定義了物理像素和設備獨立像素的對應關系
設備像素比 = 物理像素 / 設備獨立像素
在不同的屏幕上,css像素所呈現的物理尺寸是一致的,在普通屏幕下1個css像素對應1個物理像素,而在Retina屏幕下,1個css像素對應的卻是4個物理像素。
在js中,用window.devicePixelRatio來獲取當前設備的dpr,在css中,可以通過-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢,對不同dpr的設備,做一些樣式適配(這里只針對webkit內核的瀏覽器和webview)。
iphone6設備寬度和高度為375 667,可以理解為設備的獨立像素。他的dpr為2,所以他的物理像素為750pt1334pt
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82896.html
摘要:最近看了不少關于前端方面的書籍加上之前在的基礎上利用裸奔開發了一個移動端的項目在沒有借助任何框架的基礎下寫了近行的代碼這是項目初期完全沒有想到的問題在把后端的數據處理搬遷到前端以后問題就開始變得極具復雜性端的前端發展已有數年目前也有不少成熟 最近看了不少關于前端mvc方面的書籍,加上之前在zepto的基礎上利用iscroll裸奔開發了一個移動端的webapp項目,在沒有借助任何mvc框...
摘要:最近一直在忙公司炒股大賽的頁面,終于在昨天把他給上線了。剛開始學習的時候,真心覺得無縫滾動是一個神奇的功能。原理假如需要無縫滾動的個元素是一個中的個。我們將控制在容器中滾動。這樣無縫滾動就已經實現了。 最近一直在忙公司炒股大賽的頁面,終于在昨天把他給上線了。一個看似簡單的頁面,做起來才知道其中的艱辛,暗藏深坑。由于直接使用jquery來寫頁面邏輯,因此要比想象中復雜很多。無論是從布局,...
閱讀 930·2021-11-22 12:09
閱讀 3704·2021-09-27 13:36
閱讀 1391·2021-08-20 09:37
閱讀 4008·2019-12-27 12:22
閱讀 2353·2019-08-30 15:55
閱讀 2359·2019-08-30 13:16
閱讀 2818·2019-08-26 17:06
閱讀 3434·2019-08-23 18:32