移动端布局介绍——css像素/物理像素/设备像素比

我们在网页后台看到的不同手机的分辨率是：css像素，设备的独立像素；见下图的红色框里的东西：

如果我们把这个页面截图下来在属性里看它的分辨率，  如下图所示：

 发现这个分辨率其实是css分辨率的二倍，这个分辨率叫做物理分辨率，这个倍数关系不仅有二倍的，还有三倍的关系，这就引出了另一个概念：设备像素比（dpr）=物理像素/css像素

这不同的倍数，即设备像素比有2倍，三倍的关系，是根据不同的手机来的，不一样的手机设备像素比不一样。

问题解答：

（1）设计稿给的像素是css像素还是物理像素？

答：物理像素，因为物理像素可以压缩为小像素的css像素，但是小像素的css像素扩展成物理像素，就会失真；

（2）设计稿提供一份还是多份？

答：一份，有些人可能会问设计稿就一份，那不同的设备怎么能通用呢，所以我们要尽量用百分比、弹性盒布局或者是rem布局；

每次开头加载好的代码，红框里的meta代码含义是：名字为：视口；理想宽度=设备宽度；缩放比为1，含义就是不缩放了，见下图：