阅读 1285

作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐

在前端开发之前,设计师都会为前端开发者提供视觉稿/设计稿。 那我们怎么才能用代码还原设计稿并适配多种屏幕呢? 首先需要了解一些设计上的概念!

一. 分辨率

描述显示器设备时, 我们常说的分辨率都是设备分辨率,设备分辨率又有以下别名

  • 显示器🖥️分辨率
  • 屏幕分辨率
  • 物理分辨率
  • 物理设备分辨率
  • 设备物理分辨率
  • .....

显示分辨率(屏幕分辨率)是指显示器能显示的像素有多少。 由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多。

  • 显示分辨率一定的情况下,显示屏越小图像越清晰
  • 显示屏大小固定时,显示分辨率越高图像越清晰

--百度百科

比如:手机的分辨率就很高,因为手机屏幕很小,所以需要更高的分辨率才能让图像显示得更清晰

分辨率=画面水平方向的像素值 * 画面垂直方向的像素值

例如,一个屏幕分辨率是1024×768 =786432 ,也就是说

  • 水平方向上有1024个物理像素;
  • 垂直方向上有768个物理像素 ;

1.1 分类

  • 设备分辨率-适用于电子屏幕,设备分辨率反映了硬件设备处理图像时的效果是否细腻
  • 图像分辨率-适用于图像/设计稿,图像分辨率指标的高低反映了图像清晰程度

在PC端非 retina屏上,设备分辨率等于图像分辨率

1.2 单位

分辨率的单位用 屏幕像素密度 来表示

屏幕像素密度,即每英寸屏幕所拥有的像素数,即在一个对角线长度为1英寸的正方形内所拥有的像素数

PPI: Pixels Per Inch(像素每英寸),该值越高,则屏幕越细腻。

PPI 适用于图像分辨率,图像分辨率决定了图像输出的质量,图像分辨率和图像尺寸(高宽)的值一起决定了文件的大小,且该值越大图形文件所占用的磁盘空间也就越多 PPI数值越高,代表显示屏能够以越高的密度显示图像,画面的细节就会越丰富。

DPI: Dots Per Inch(点每英寸),该值越高,则图片越细腻。

适用于设备分辨率, 设备分辨率指的是各类输出设备每英寸上可产生的点数,如显示器、打印机、绘图仪的分辨率。

PPI/DPI:用在图片上。因为图片既可以在屏幕上显示,又可以印刷到纸上

DPI/PPI经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说,

  • “像素”只存在于电脑显示领域
  • “点”只出现于打印或印刷领域
  • 关于打印机的点距我们不去关心,只要知道 当用于描述显示器设备时PPI与DPI是同一个概念

1.3 DPI/PPI 的计算

DPI/PPI 计算方程式:(X:长度像素数;Y:宽度像素数;Z:屏幕尺寸即对角线长度)

某东上的显示器分辨率

屏幕分辨率是3840×2160, 屏幕尺寸是27英寸,可得 该显示器的屏幕像素密度是163 PPI(屏幕上每英寸有163个像素)

询问别人一粒像素有多大是不严谨的问题,像素在脱离了屏幕尺寸之后是没有大小可言的:

  • 可以将 1920 * 1080 颗像素放到 40 寸的小米电视机里面
  • 也可以将同样多的像素放到 5.5 寸的 iPhone7 Plus 手机里面去
  • 那么对于 40 寸的电视而言,每个像素颗粒当然会大于 5.5 寸的手机的像素

1.3.1 相同的分辨率,更高的DPI表现为物理尺寸更小

右图中的像素跟左边的原始图像是一样,我们将DPI值从72提高到了300,效果是每英寸现在有更多的点,但是由于构成图像的总像素数没有变化,所以数学上表现的是图像变小,构成图像的每个像素变得更小

以简化的图像表达就是:

1.3.2 物理尺寸相同,较低的DPI表现为较低的分辨率

左边是原始图像,右边图减小了DPI的值,同时保持相同的物理大小,这就意味着每英寸的点数变少,同时每个像素都变大,图像变模糊。

以简化的图像表达就是:

相同的物理尺寸,较低的分辨率表现为DPI更小

因为在固定屏幕的情况下,提高屏幕分辨率(如下图),图像和文字显示目标会相应缩小,原因是系统并不会自动根据屏幕尺寸和分辨率关系相应的调整文字和图标的大小,这是Windows系统自身的行为。

同样尺寸,较低的分辨率,文字较大

同样尺寸,较高的分辨率,文字更小

同样尺寸,提高分辨率,导致DPI 更大了,因此图像文字显示更清晰了!但是图像和文字却缩小了!

这就是老年手机或电脑的设备物理分辨率都较低的原因, 因为这样文字和图标才会比较大

1.4 像素密度(PPI/DPI)有什么用

用在ps(平面设计)中,如海报,喷绘广告等

因为PPI的大小关系了ps中设计稿的文件大小和显示效果。前面也说到了, PPI 越高,则屏幕越细腻,图像越清晰。在图像处理中选择合适的设备分辨率值和图像分辨率值,既能保证图像质量,又能减少文件大小

移动端设计稿中,PPI 决定了retina屏 移动端设计稿应该出几倍图-在移动端适配中讲到

1.5 总结

显示器分辨率是指 显示器能显示的像素多少,可显示的像素越多,画面就越精细。

一般通过PPI(每英寸能显示多少像素),DPI(每一点能显示多少像素)来衡量,PPI/DPI越大,画面越精细。

二. 像素

2.1 逻辑像素-PX(CSS pixels)

逻辑像素有很多别名

  • 设备独立像素(device-independent pixel)
  • Web像素
  • CSS像素

浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px,px是一个相对单位,相对的是设备物理像素(device pixel),其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的

CSS像素的单位是PX(CSS pixels), 在浏览器中可以通过 screen.width ,screen.height 获取浏览器的逻辑像素

这就可以解释,前端界面适配的时候为什么需要知道设备物理分辨率?

2.1.1 在一般PC屏幕上, CSS的1px = PC屏幕的 1个物理像素

设备名称屏幕(设备)分辨率浏览器最大宽度(css像素)
13.3英寸HP 440 G51366dp x 768dp1366px

2.2.2 retina屏幕上, CSS的1px = PC屏幕的 4个物理像素

iphone3的分辨率是320*480。 但是从iphone4开始,苹果公司推出了所谓的 retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍

设备名称屏幕(设备)分辨率浏览器最大宽度(css像素)
14英寸MacBook PRO2560dp x 1600dp1440px

2.2.3 安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同

其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpimdpihdpixhdpi等不同的等级,分辨率也是五花八门。

2.2.4 用户缩放浏览器也会引起css中px的变化

  • 当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;
  • 把页面缩小一倍,css中1px所代表的物理像素也会减少一倍

假设我们用PC浏览器打开一个页面,浏览器此时的宽度为800px,页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。

但如果我们把页面放大(通过“Ctrl键”加上“+号键”),放大为200%,也就是原来的两倍。此时块状容器则横向占满了整个浏览器。

但此时我们既没有调整浏览器窗口大小,也没有改变块状元素的css宽度,但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍.

也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的,但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。 从上面的例子可以看出,CSS像素从来都只是一个相对值

2.2.5 如何解决移动端 1px 边框问题

由于同一个设备上或在不同设备之间 1px 所代表的物理像素是可以变化的。

CSS像素为1px宽的直线,对应的物理像素是不同的,可能是2px或者3px。而设计师想要的1px宽的直线,其实就是1物理像素宽。而设计师要的实际1px的边框就是下面这种情况:

详情可以参考 解决移动端1px边框问题的几种方法

2.2 物理像素-DP(device pixels)

物理像素别名

  • 设备像素(device independent pixels)
  • 设备物理像素

设备像素(物理像素),顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位pt。

设备屏幕实际拥有的像素点,屏幕的基本单元,是有实体的。

比如iPhone 6的屏幕在宽度方向有750个物理像素点,高度方向有1334个物理像素点,所以iPhone 6 总共有750*1334个物理像素点。

所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS像素点,

  • 在普通屏幕下1个CSS像素对应1个物理像素
  • 在Retina屏幕下,1个CSS像素对应4个物理像素。

可以发现,在同样的大小下,2dpr的屏幕时普通屏幕像素点的4倍,3dpr的屏幕时普通屏幕像素点的9倍。这就是retina屏幕

2.3 设备像素比-DPR(device pixels ratio)

设备像素比(dpr 描述的是未缩放状态下,物理像素和CSS像素的初始比例关系)

设备像素比(dpr) 是指开发中1个css像素占用多少设备像素,如2代表1个css像素用2x2个设备像素来绘制。

其实在很久以前,CSS的1px,屏幕就渲染成1个实际的物理像素点,即 DPR=1。 但从iPhone4开始, 苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏,在Retian屏上,即 DPR===2

那CSS的1px到底等于几个物理像素呢?

  • 与dpr(屏幕像素密度)有关
  • 与用户缩放有关系。
    • 把页面放大一倍,那么CSS中1px所代表的物理像素也会增加一倍;
    • 把页面缩小一倍,CSS中1px所代表的物理像素也会减少一倍。

在某些浏览器中,window.devicePixelRatio 可以获得此比例,即 devicePixelRatio = 设备物理像素 / 逻辑像素。

但是要注意的是,window.devicePixelRatio 在不同的浏览器中还存在些许的兼容性问题

三. Retina-视网膜显示屏

所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而

  • 达到更高的分辨率
  • 并提高屏幕显示的细腻程度。

在正常阅读距离下,人眼无法分 辨屏幕上的像素颗粒,使得屏幕显示效果更为细腻平滑

从iPhone4开始, 苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina屏幕。

3.1 与普通显示器的区别

3.1.1 增加分辨率的方式不同

  • 普通屏幕通过增大尺寸来增加分辨率
  • Retina屏幕通过提升屏幕单位面积内的像素数量(增大PPI),即像素密度来提升分辨率,这样就有了高像素密度屏幕

3.1.2 相同的设备物理尺寸,CSS像素与物理像素的转换不同

  • 普通屏幕: 1px 等于一个物理像素
  • Retina屏幕:1px 等于四个物理像素

iphone3的分辨率是320*480。 但是从iphone4开始,苹果公司推出了所谓的 Retina屏,分辨率提高了一倍,变成640*960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍

非retina屏与retina屏显示效果对比

非r屏与r屏在显示字母a的左上角边沿时的细节对比

两块面积相同而PPI不同的屏幕,自然是PPI大的那块总像素数量多(见上文的PPI解释),其展示细节的潜力和能力也越大,只用4x4个像素来表达一条曲线,自然不如8x8个像素更加细腻平滑。后者的PPI是前者的2倍,后者像素数量则是前者的4倍。

3.2 为什么相同尺寸的屏幕, PPI和分辨率增大了, 图标字体却没有变小

根据windows的PPI计算规则, 分辨率提升了,那么图标和文字尺寸就会变小。

但是Mac的操作系统不同,它自动采取相应的模式(Mac下的HiDPI)进行适配,将缩小后的字体(苹果一直采用矢量字体)和图标重新放大,这样苹果用了更多的像素数来显示同样的内容,所以显示尺寸仍然不变。

pt和px的关系

pt和px的关系就是—— 1pt 里面有几个像素点。(比如 1pt里面有1个px,也可以有2个,3个,分别对应上图的@1x-一倍图,@2x-二倍图,@3x-三倍图)

还是拿iPhone6举例,下图 px 宽高是375*667,pt 宽高是750*1334,即 pt的宽高是px的2倍。

移动端开发时, 设计师以iPhone6(750px*1344) 为模板进行设计的,这是是物理像素。但是前端开发者以逻辑像素为准,所以开发时需要将 单位除以2

  • iPhone6,下图 px 宽高是375*667,pt 宽高是750*1334,pt的宽高是px的2倍--设计师出的图是根据750*1334 出的,因此前端开发时需要将单位除以 2
  • iPhone6sPlus pt和px的比例是1:3,--如果设计师iPhone6sPlus的尺寸出图,则前端开发时需要将单位除以 3

四. 移动端2倍图设计相关疑问

如下图iPhone6看到的宽高375*667,这个就是逻辑像素

4.1 前端开发时的单位换算

  • iPhone6 的逻辑分辨率是375*667,物理分辨率是750*1334,--如果设计师以750*1334 出设计稿,则前端开发时需要将单位除以 2
  • iPhone6sPlus pt和px的比例是1:3,--如果设计师以 iPhone6sPlus 的尺寸出设计稿,则前端开发时需要将单位除以 3

4.2 前端开发时的图片适配

4.2.1 Android/IOS端

比如你需要一个30pt*30pt的图标,那么这时你就需要跟设计师要三个文件:

  • 一个是30px*30px的PNG图片,用原名来命名即可,例如sample.png。
  • 一个是60px*60px的PNG图片,这个要用原名@2x来命名,例如sample@2x.png
  • 一个是90px*90px的PNG图片,这个要用原名@3x来命名,例如sample@3x.png

这样把这三张图片导入进工程,你会神奇地发现,这三个文件居然会被iOS和Android 统一识别为sample.png,用的时候只需要引入 "sample.png" 就行了。

那么讲一下应用场景。

  • 1x的图标用于1:1的屏幕,非视网膜屏,例如iPhone 3等 非 retina屏。
  • 2x的图标用于1:2的屏幕,大部分视网膜屏,如iPhone 4S、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。
  • 3x的图标目前应用于1:3的屏幕,即iPhone 6Plus,这个就比较特殊了,因为苹果为了方便开发者,想出来一个简便的实现方案,将 2208*1242 分辨率的图像压缩输出在 1920*1080 的屏幕上。

4.2.2 移动端上的web

使用media查询判断不同的设备像素比来显示不同精度的图片 只适用于背景图

      .avatar {
        background-image: url(conardLi_1x.png);
      }

      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .avatar {
          background-image: url(conardLi_2x.png);
        }
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        .avatar {
          background-image: url(conardLi_3x.png);
        }
      }
复制代码

或者

使用img标签srcset属性,浏览器会自动根据像素密度匹配最佳显示图片:

<img src="conardLi_1x.png"
     srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
复制代码

参考文档

  1. 前端不止:Retina屏幕下两倍图
  2. 有关retina和HiDPI那点事
  3. 掌握web开发基础系列--物理像素、逻辑像素、css像素-上古鹏-掘金
  4. 掌握web开发基础系列--长度单位
  5. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
  6. 前端开发之retina屏幕-思否-luckyyulin
  7. 几个基础性问题知识:二倍图,三倍图,像素,分辨率,Retina,px

移动端

  1. 解决移动端1px边框问题的几种方法
  2. 前端移动端适配总结
  3. 解决移动端1px边框问题的几种方法
  4. 移动前端开发之viewport的深入理解-无双-博客园
  5. 移动端适配方案以及rem和px之间的转换-博客园
  6. 移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)
  7. 关于移动端适配,你必须要知道的-知乎
文章分类
前端
文章标签