揭秘移动端px,dpi,dpr

前言

移动端开发的时候，我们拿到的 UI设计稿 通常都是 640px 或者是 750px ,明明我们的 设备视口宽度 是设计稿的 一半 ,这是为什么呢？

经常听到设计同学说，你这图片在 苹果手机上看有点糊啊 ，为什么我们开发的时候图片显示正常，到了 真机 就不一样了呢？

带着这两个问题，我们来学学本章移动端的一些 概念 吧

设备像素（dpi）

❝

设备像素（Device Pixels，简写DP）：又称 物理像素 ，是设备能控制显示的 最小单位 ，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的 设备像素单位

❞

注意设备像素表示屏幕上可以铺多少个点点，而不是一个绝对长度单位（例如in,mm），因为我的点点和你的点点大小不一样

了解了 设备像素概念 ,回过头来想想我们 750px 的UI设计稿，它的 单位 跟我们平时网页布局中的 CSS单位 一致吗?

答案是否定的，实际上UI设计稿的像素就是设备像素，它是按照设备像素来的

分辨率

❝