CSS像素和物理像素

1. CSS像素

什么是CSS像素？

CSS像素又称为逻辑像素，虚拟像素，也称为直觉像素。CSS像素所使用的单位是px。是一个相对单位。

为什么会有CSS像素产生呢？

屏幕显示是由一个一个不连续的点组成，最小组成单位为物理像素。而在现实生活中，人肉眼看到的是一系列连续的图形，因此采用CSS像素来进行衡量。

而CSS像素是如何计算的呢？

CSS像素是个相对单位，1px等于几个物理像素。

但是仍然存在一定的问题

• 相同尺寸设备，不同屏幕密度
  

  假设按照1px = 2pt进行显示，有一个盒子大小为6px/3px，此时由于第一张图的密度小，显示的大小比第二张图大，显然效果不佳。

• 不同尺寸，相同的屏幕密度，当多个相同盒子占用相同的物理像素，采用浮动布局在一行显示的时候，但是由于设备尺寸不一，设备小的会将盒子挤入下一排进行显示。

  而以上问题产生，主要需要解决如何在不同屏幕上保持一致的浏览体验。

  解决方式：

  • 屏幕密度比

    将高密度屏幕的多个设备像素当作1个像素使用

  • 自适应

    由于各大厂商的分辨率多种多样，为了统一体验效果，使用rem/vw/vh等自适应单位。

  2. 物理像素

  也成为“设备像素”，屏幕的物理像素在每个设备出厂时已经被固定好，任何设备的物理像素都是固定不变的。

  物理像素的单位是pt，是一个绝对单位。

  且物理像素一般指的是设备的分辨率，也即1pt = 1/72英寸

  查看IPhone6的参数

  屏幕尺寸	像素分辨率	物理尺寸	屏幕密度
  4.7英寸	750*1334 px	5.44*2.64英寸	326PPI

  • 像素分辨率表示，iphone6的4.7英寸屏幕上，在水平方向的width上有750个物理像素点，在垂直方向height有1334个物理像素点

  • 屏幕尺寸指的是屏幕对角线的长度，单位为inch（英寸），是一个长度单位，且1 inch = 2.54cm

    屏幕尺寸的计算方式 = 屏幕尺寸（屏幕对角线的长度）= 屏幕斜边的像素 / 像素密度

  • 像素密度（屏幕密度PPI）表示每单位英寸上像素的数量，PPI的值越高，表示一定尺寸的屏幕上像素数量越多，也即同一尺寸下，PPI增加了N倍，物理像素会增加n^{2倍，同时每个物理像素的大小会缩小1/n}2倍。

    PPI = 根号下（x^2+y2）/ 屏幕尺寸 其中x*y为屏幕分辨率

  • 像素比(DRP)，表示一个CSS像素占用几个物理像素

    DPR = 物理像素 / css像素