淺談一下web移動端基本

標籤：蘋果   裝置   開發人員   web開發   idt   end   解析度   iphone6   device   

螢幕尺寸、螢幕解析度、螢幕像素密度

螢幕尺寸：           指螢幕的對角線的長度，單位是英寸，1英寸=2.54厘米。                常見的螢幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。螢幕解析度：（iphone6  750*1334）        指在橫縱向上的像素點數，單位是px，1px=1個像素點。一般以縱向像素*橫向像素來表示一個手機的解析度，                如1960*1080。（這裡的1像素指的是物理裝置的1個像素點）螢幕像素密度/像素密度/螢幕密度：        螢幕上每英寸可以顯示的像素點的數量，單位是ppi，即“pixels per inch”的縮寫。        螢幕像素密度與螢幕尺寸和螢幕解析度有關

物理像素,CSS像素

 裝置像素/物理像素：（解析度）            買手機的時候會有一個 n x m 的解析度，那是螢幕的n x m個呈像的點，                一個點（小方格）為一個物理像素。                    它是螢幕能顯示的最小粒度.            裝置像素也被稱為物理像素,他是顯示裝置中一個最微小的物理組件。                 每個像素可以根據作業系統設定自己的顏色和亮度。            任何裝置的物理像素的數量都是固定的 CSS像素：            CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（確定）Web頁面上的內容。            它是為web開發人員創造的，在css或者javascript中使用的一個抽象的層            一般情況下，CSS像素被稱為裝置獨立畫素（device-independent像素），簡稱為“DIPs”。            在一個標準的顯示密度下(普通屏)，一個CSS像素對應著一個裝置像素。css像素與物理像素的關係            一個width為200px的元素，它佔據了200個css像素，但200個css像素佔據多少個物理像素取決於            螢幕的特性（是否是高密度,即像素比）和使用者的縮允許存取為。            在蘋果的視網膜螢幕上，視網膜的像素密度是普通螢幕的兩倍，這個元素就跨越了400個裝置像素            如果使用者放大，它將跨越更多的裝置像素裝置獨立像素:裝置獨立像素(也叫密度無關像素)，可以認為是電腦座標系統中得一個點，            這個點代表一個可以由程式使用的虛擬像素(比如: css像素)，                然後由相關係統轉換為物理像素。位元影像像素：一個位元影像的像素是柵格映像(如：png, jpg, gif等)最小的資料單元          1個位元影像像素對應於1個物理像素，圖片才能得到完美清晰的展示       對於web開發人員而言：            我們使用的每一個css和javascript定義的像素本質上代表的都是css像素，我們在開發過程中            並不在意一個css像素到底跨越了多少個裝置像素。我們將這個依賴於螢幕特性和使用者縮放程度的            複雜計算交給了瀏覽器。

像素比

像素比:它的官方的定義為：裝置物理像素和裝置獨立像素的比例，        也就是 devicePixelRatio = 物理像素 /獨立像素            window.devicePixelRatio

淺談一下web移動端基本