我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素;见下图的红色框里的东西:
如果我们把这个页面截图下来在属性里看它的分辨率, 如下图所示:
发现这个分辨率其实是css分辨率的二倍,这个分辨率叫做物理分辨率,这个倍数关系不仅有二倍的,还有三倍的关系,这就引出了另一个概念:设备像素比(dpr)=物理像素/css像素
这不同的倍数,即设备像素比有2倍,三倍的关系,是根据不同的手机来的,不一样的手机设备像素比不一样。
问题解答:
(1)设计稿给的像素是css像素还是物理像素?
答:物理像素,因为物理像素可以压缩为小像素的css像素,但是小像素的css像素扩展成物理像素,就会失真;
(2)设计稿提供一份还是多份?
答:一份,有些人可能会问设计稿就一份,那不同的设备怎么能通用呢,所以我们要尽量用百分比、弹性盒布局或者是rem布局;
每次开头加载好的代码,红框里的meta代码含义是:名字为:视口;理想宽度=设备宽度;缩放比为1,含义就是不缩放了,见下图:
如果觉得《移动端布局介绍——css像素/物理像素/设备像素比》对你有帮助,请点赞、收藏,并留下你的观点哦!