裝置解析度與css像素的關係

標籤：部落格   不一致   div   標籤   定義   證明   電腦   ice   手機   

　　最近在移動端布局栽了跟頭，就百度四處逛逛部落格啥的，總算是對解析度和css像素的關係重新認識了一下，於是乎趕緊寫份作業，讓路過的大神檢查檢查。

　　裝置解析度和css像素本身指的就不是同一東西，首先css是針對網頁來講的，萬事不離瀏覽器。而分別率是針對裝置（電腦，手機來講的），然而就是因為它們的單位都是px，所以才會讓人費解。但是觀看了多篇文章，發現很多講得太複雜，總是會扯到ppi，dip，dp之類的英文，看到末尾總是忘記這些指的是啥。

 

　　裝置存在物理像素和獨立像素，物理像素就是解析度，獨立像素則與css像素保持相同。

　　例如，一部手機的解析度為1920*768，則他的獨立像素可能為320px，所以你有css布局一個寬320px大小的div，就是全屏寬了。不同的裝置獨立像素不同，而一般pc獨立像素會與物理像素（解析度）保持一致，而手機端二者並不一致。這裡會牽扯一個devicePixelRatio，也就是裝置物理像素與獨立像素的比值。說到這裡，貌似證明了一件事，那就是獨立像素（解析度）跟css像素沒有半毛錢關係，布局只要考慮裝置獨立像素就OK了。

　　<meta name="viewport" content="width=device-width">而這個標籤正好讓瀏覽器的預設寬度（不定義的情況下為980px）與裝置獨立像素保持一致，有了這列標籤，那麼擷取獨立像素不就輕而易舉了，移動端的布局也就有了一個對照。

裝置解析度與css像素的關係