关于css:屏幕尺寸像素分辨率和-devicePixelRatio

40次阅读

共计 2046 个字符,预计需要花费 6 分钟才能阅读完成。

引子

最开始写页面的时候,对页面外面的 px 还是蛮好奇的,电脑上的分辨率如同正好跟页面渲染的宽度值对应,但手机外面却不是这样的,记得过后还去找了相干材料,如同晓得是怎么回事。最近脑海里再次想起了这个问题,但曾经不晓得该如何表述,又没有相干的笔记,这个感觉有必要辨别一下相干的概念。

  • Origin
  • My GitHub

屏幕尺寸

屏幕尺寸是指屏幕对角线的尺寸,常常看到的形容是英寸(缩写 in),1 in = 2.54 cm。

像素

像素是屏幕上图像显示的最小可控元件,它不是一个点或者一个方块,而是一个形象的取样。每个像素都有色彩,色彩通常用 3 或 4 个重量示意,例如 RGB 办法用红、绿、蓝三原色的光学强度示意一种色彩,CMYK 办法用青、品红、黄、黑四种颜料含量来示意一种色彩,CMYK 色域在印刷行业和打印机常见。

一个像素通常被认为是数字图像中的最小单位。在不同的上下文中,像素的含意可能不同,例如视频中的像素,打印时的像素,显示屏的像素,或者数码相机(感光元素)中的像素。依据语境的不同,会有一些更为准确的同义词,例如取样点,字节,比特,超集,斑等等。

设施像素

设施像素是指设施中应用的实在像素,也叫物理像素。在同一设施中,像素的总数是固定的。

像素密度 PPI 和 DPI

PPI(pixels per inch)是指每英寸的像素数目,罕用于度量计算机显示设施像素密度。

DPI(dots per inch)是指每英寸数码印刷的点数,用于度量印刷行业的空间点的密度。

实践上,PPI 是能够通过已知的对角线尺寸和屏幕分辨率计算出来。能够通过上面的公式计算:

  • w 是程度方向上的像素数
  • h 是垂直方向上的像素数
  • d 是屏幕尺寸

例如 21 英寸屏幕,分辨率为 1920*1680,那么 w=1920,h=1680,d=21,带入计算的 PPI=121.49。

CSS 像素

CSS 像素是编程中的概念,用于逻辑上掂量像素的单位。

分辨率

分辨率(Image resolution)泛指量测或显示系统对细节的分辨能力。从不同方面形容,有像素分辨率、空间分辨率、光谱分辨率和工夫分辨率。平时接触大部分是像素分辨率,例如常说的视频分辨率、显示分辨率和图形分辨率。这里暂只探讨像素分辨率类别。其它类型的相干介绍在这里。

屏幕分辨率

屏幕分辨率是屏幕显示的像素总数,再细分一下就有:物理分辨率和显示器分辨率。

  • 物理分辨率是显示器的固有参数,不能调节,个别是指屏幕的最高可显示的像素数。
  • 显示器分辨率就是操作系统设定的分辨率。在显示器分辨率和物理分辨率统一时,显示成果才是最佳的,个别举荐设置的分辨率就是物理分辨率。零碎设置分辨率失效是通过算法进行了转换。

举个例子,在手机上的看对于手机信息,能够看到分辨率信息为 720*1280,意思就是屏幕程度方向上有 720 个像素,垂直方向上有 1280 个像素。

图像分辨率

图像分辨率就是单位英寸中所蕴含的像素总数。图像分辨率的表达方式也为“程度像素数×垂直像素数”。例如一张图片的分辨率是 320*289,意思就是图片程度方向上有 320 个像素,垂直方向上有 289 个像素。

devicePixelRatio

这里是指 Javascript 中的 window.devicePixelRatio,它是设施上物理像素和设施独立像素(device-independent pixel,dips,dp)比值。用公式表白就是:devicePixelRatio = 物理像素 / 设施独立像素 。这个也能够解释为 CSS 像素和物理像素的比例,简略来说,它通知浏览器须要多少物理像素来绘制一个 CSS 像素。这个属性能够用来辨别视网膜设施和非视网膜设施。

设施独立像素也叫逻辑像素,是一种基于计算机坐标零碎的物理测量单位,应用程序将独立像素通知零碎,零碎再将设施独立像素转换为物理像素。以设施独立像素定义的尺寸,不论屏幕的参数如何,都能以适合的大小显示。在 IOS 视网膜设施上,screen.width 返回就是 dips,Andioid 设施上 screen.width 的不肯定是 dips。

参考资料

  • https://en.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://en.wikipedia.org/wiki…
  • https://en.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://www.jianshu.com/p/c33…
  • https://developer.mozilla.org…
  • https://www.quirksmode.org/bl…
  • https://developer.mozilla.org…
  • https://en.wikipedia.org/wiki…
  • http://yunkus.com/physical-pi…
  • https://segmentfault.com/a/11…
正文完
 0