标签：博客 不一致 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）与设备独立像素保持一致，有了这条标签，那么获取独立像素不就轻而易举了，移动端的布局也就有了一个对照。
标签：博客 不一致 div 标签 定义 证明 电脑 ice 手机
原文地址：http://www.cnblogs.com/lyfx/p/7414086.html
