失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 移动端布局介绍——css像素/物理像素/设备像素比

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

时间:2019-10-14 11:29:29

相关推荐

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

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

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

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

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

问题解答:

(1)设计稿给的像素是css像素还是物理像素?

答:物理像素,因为物理像素可以压缩为小像素的css像素,但是小像素的css像素扩展成物理像素,就会失真;

(2)设计稿提供一份还是多份?

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

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

如果觉得《移动端布局介绍——css像素/物理像素/设备像素比》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。