移动端常见布局

像素单位（相对单位）以下是1英寸下 像素分布为10的分布图（10px/1英寸）

PPI（Pixels Per Inch）每一英寸的像素数量称为 像素密度。

最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

每英寸有多少个像素，称为ppi(pixel per inch)。我们可以简单算算，iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸(1英寸)，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼 也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。

只要各个设备的逻辑像素值相同,最终呈现的盒子大小就相同 屏幕像素/倍率

Retina即视网膜屏幕，苹果注册的命名方式，意思是具有高PPI的屏幕 一般大于320px

主流设备的化分

四大类

大屏设备 PC >1200px

中屏设备 992px—1200px

小屏设备 768px-992px ipad 768px

超小屏 <768px 320px,375px,4