欢迎光临
我们一直在努力

移动web入门 | 分辨率、像素、PPI基础

分辨率概念

分辨率决定了位图图像细节的精细程度。通常情况下,图像的分辨率越高,所包含的像素就越多,图像就越清晰,印刷的质量也就越好。同时,它也会增加文件占用的存储空间。

屏幕分辨率是指纵横向上的像素点数,单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。就相同大小的屏幕而言,当屏幕分辨率低时(例如 640 x 480),在屏幕上显示的像素少,单个像素尺寸比较大。屏幕分辨率高时(例如 1600 x 1200),在屏幕上显示的像素多,单个像素尺寸比较小。 显示分辨率就是屏幕上显示的像素个数,分辨率160×128的意思是水平方向含有像素数为160个,垂直方向像素数128个。屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。

物理像素与CSS像素

  • 物理像素:又叫设备像素,不同的设备的物理像素大小也是不同的
  • CSS像素:又叫逻辑像素(设备独立像素),也就是我们写代码时候的px

设备像素比

  • 设备像素比(dpr:device pixel ratio)
  • dpr = 设备像素 / CSS像素(缩放比是1的情况下)
  • dpr = 2 表示1个CSS像素用2*2个设备像素来绘制

标清屏与高清屏

标清屏只一个物理像素绘制一个CSS像素,即dpr = 1。

高清屏表示多个物理像素绘制一个CSS像素,如dpr = 2,代表用2*2个物理像素绘制一个CSS像素。

缩放

  • 缩放改变的是CSS像素,物理像素不会改变

如:缩放前一个1CSS像素 = 1物理像素

  • 放大后:1个CSS像素 = 2*2个物理像素
  • 缩小后:2*2个CSS像素 = 1个物理像素

PPI或DPI

  • 代表每英寸的物理像素点
  • ppi:pixels per inch
  • dpi:dots per inch

PPI计算公式为 : PPI = 物理分辨率 / 长度(单位:英寸)

赞(1) 打赏
未经允许不得转载:散人研 » 移动web入门 | 分辨率、像素、PPI基础
分享到: 更多 (0)

评论 抢沙发

2 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏