移动端尺寸：设备像素、css像素、屏幕尺寸、像素密度(PPI)、像素比(DPR)

jinglisha
3,179 阅读3分钟

设备像素(又叫物理像素)

  • 由一个个发光的点组成，通过控制每个点的颜色，屏幕就会显示不同的颜色；

  • 屏幕上有多少个点就用分辨率表示；屏幕从出厂开始，点的数量就固定了；

    比如：华为mate40 的分辨率为2340 x 1080 像素，那么屏幕上一共有2376*1080=2,566,080个点

  • 设备像素是真实存在的；
    image.png

  • 这个点的单位叫pt，是绝对单位；1pt = 1/72 (inch), inch 及英寸，而1英寸等于2.54厘米。

  • 常用叫法:

    720p：1280x720

    1080p：1920X1080

    5k: 5120x2880

css像素(又叫设备独立像素、逻辑像素)

  • 就是样式里的px，是相对单位，大小不固定；

    一般默认情况下，1px等于1pt，如果我们把浏览器放大到200%，那么1px等于2pt

  • 这事一个抽象的概念

屏幕尺寸

  • 单位英寸，是长度单位，比如华为mate40的屏幕尺寸是6.5英寸，指的就是对角线长度，而不是屏幕面积

    image.png

  • 1英寸(inch) = 2.54厘米(cm)

  • 屏幕尺寸=屏幕斜边像素/PPI

    image.png 如何算iphone13 pro max的屏幕尺寸？已知分辨率为2778 x 1284， ppi为458

    var _px = Math.sqrt(Math.pow(2778,2) + Math.pow(1284,2))
var _inch = _px/458
console.log(_inch) // 6.682057487022466

像素密度(PPI)

  • 1英寸面积上的设备像素点的数量；

  • PPI = 屏幕斜边像素/屏幕尺寸;

  • PPI越高，代表在一定尺寸的屏幕上设备像素点数量越多；屏幕越清晰；

    image.png

  • 如何查阅PPI

  • PPI是由厂家决定的

  • 什么是高清屏？同等尺寸下，PPI翻了一倍，苹果管高清屏叫视网膜屏

  • PPI增加n倍，设备像素点的数量会增加n乘n倍，同时，设备像素点的大小会缩小1/4

    image.png

像素比(DPR)

  • 一个css像素占用几个设备像素，比如，下面这个图标占用几个设备数量

    image.png

  • DPR = 物理像素/css像素

  • 获取像素比window.devicePixelRatio，比如：iphoneX的像素比是3

    image.png

总结

  • 像素分为设备像素和css像素；

  • 设备像素对应的是手机中的分辨率，一出厂数量就固定了，永远不会变；

  • 像素密度PPI由设备像素决定，PPI = 屏幕斜边像素/屏幕尺寸，屏幕斜边像素等于屏幕分辨率的平方相加再开根；PPI越大代表设备像素点越多， 图像越清晰；PPI如果翻一番，设备像素点数量增加四倍，那么每一个点占的空间就被压缩，缩小成原来的1/4；

  • css像素是会变的，css像素跟设备像素之间的关系就是像素比DPR；DPR = 物理像素/css像素，如果像素比为2，代表一个css像素占两个设备像素点；像素比的意义就是能够让图像在高清屏下正常显示，比如有时候UI设计的图在手机上显示出来有点模糊，那可能UI在设计的时候就要做大点，因为现在手机的分辨率越来越高了，即设备像素点越来越多了，按照iphone6的尺寸设计可能在现在主流手机上会不够清晰。

avatar
文章
阅读
粉丝