一文读懂 CSS 单位

家好，我是Echa。

最近有不少的粉丝老铁们私信我为啥这几天没有创作新内容了，实在对不住。小编我身在广州中招羊了，我在最近一篇文章也有提到过，今天是第四天，基本上康复了，奥密克戎BA.5其实没有那么恐怖，中招了前三天特难受，熬过来了就没事了，大家莫慌。现在小编就可以认认真真的继续创作内容了。同时也非常感谢大家默默的关心我小编身体状况，非常谢谢。

创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！

说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！

1. 相对单位

相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；
视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

下面就来看看这些常见的CSS单位。

（1）em 和 rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。

em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。

当然，上面的这个说法是不严谨的。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：

那如果我们给子元素的字体设置为30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：

所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。

rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：

如果没有对根元素设定字号的话，font-size: 1rem的作用与font-size: initial相同。

使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小，而不是固定大小。那何时应使用 em，何时应使用 rem 呢？可以根据两者的差异来进行选择：

两者在客户端中计算出来的样式都会以px的形式显示；
rem是相对于根元素html的font-size计算，em 相对于元素的font-size计算；
当需要根据浏览器的font-size设置缩放时，应该使用 rem；
使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定；
rem 可以从浏览器字体设置中继承 font-size 值， em 可能受任何继承过来的父元素 font-size 的影响。

（2）ex 和 ch

ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size 和 font-family属性。

ex 指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。
ch 和 ex 类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。

（3）vw、vh、vmax 和 vmin

这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。如果视窗大小发生了变化，那么这些值都会随之变化。这四个单位指的是：

vw：视窗宽度的百分比；
vh：视窗高度的百分比；
vmax：较大的 vh 和 vw；
vmin：较小的 vh 和 vw。

假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。

vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。

这些单位都是长度单位，所以可以在任何允许使用长度单位的地方使用。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。

2. 绝对单位

在 CSS 中，绝对单位包括：px 、pt 、pc、 cm 、 mm 、in 等。绝对单位是一个固定的值，它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率（DPI，每英寸的点数）。px就是我们最常用的绝对单位之一。这些绝对单位的换算关系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全称为 Pixels，表示像素，它并不严格等于显示器的像素，尤其在高清屏下。尽管CSS单位会根据浏览器、操作系统或者硬件适当缩放，在某些设备或者用户的分辨率设置下也会发生变化，但是96px通常等于一个物理英寸的大小。

CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。一个“600x400”解析度的照片的长宽分别为“600px”和“400px”，所以照片本身的像素并不会与显示装置像素一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。

很多时候， px 也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，因为像素单位相对的是设备像素。在同一个设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的；在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全称为 Point，表示点。常用于软件设计和排版印刷行业（笔者做的前端系统，最终的产物就是一个需要拿去印刷的PDF，所以会经常用到这个单位）。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。

如果单纯为了网页的显示，建议就使用px像素单位，如果需要输出印刷产品，就可以考虑使用pt。

（3）pc

pc 全程为 Picas，表示派卡。相当于我国新四号铅字的尺寸。派卡也是印刷的术语，1派卡等于12点。它和 px 的换算关系如下：

1pc = 16px

（4）cm

cm 全称为 Centimeters，表示厘米。它和 px 的换算关系如下：

1cm = 37.8px

（5）mm

mm 全称为 Millimeters，表示毫米。它和 px 的换算关系如下：

1mm = 3.78px

（6）in

in 全称为 Inches，表示英寸。它和 px 的换算关系如下：

1in = 96px

3. 频率单位

CSS中的频率单位有两个：赫兹（Hz）和千赫兹（kHz）。它们的换算关系如下：

1kHz = 1000Hz

通常情况下，频率单位使用在听或说级联样式表中。频率可以被用来改变一个语音阅读文本的音调。低频率就是低音，高频率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，当数值为0时，单位对值没有影响，但是单位是不能省略的。也就是说0、0Hz、0kHz是不一样的。所以，在使用频率单位时，不要直接写0。另外，这两个单位是不区分大小写的。

4. 时间单位

CSS中的时间单位有两个：秒（s）和毫秒（ms）。这两个时间单位都是CSS新增的单位。这两个单位的换算关系如下：

1s = 1000ms

时间单位主要用于过度和动画中，用于定义持续时间或延迟时间。下面两种定义是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率单位

CSS中的分辨率单位有三个：dpi、dpcm、dppx。这三个单位都是CSS3中华新增的单位。他们都是正值，不允许为负值。这三个单位的换算关系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率单位主要用于媒体查询等操作。

（1）dpi

dpi 全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72或96个点，大于 192dpi 的屏幕被称为高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全称为 dots per centimeter，表示每厘米包含的点的数量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全称为 dots per pixel，表示每像素（px）包含点的数量。由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度单位

CSS中的角度单位有四个：deg、grad、rad、turn。这些角度单位都是CSS3中新增的单位。它们的换算关系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般这些角度单位用于元素的旋转操作，包括2D旋转、3D旋转等。

当旋转值为正值时，元素会顺时针旋转；
当旋转值为负值时，元素会逆时针旋转。

通常情况下，一个完整的旋转就是360度。所以，所有的角度都在0-360度之间。但是，超出这个范围的值也是允许的，只不过都会归到0-360度之间。比如，顺时针旋转420度（450deg）、逆时针旋转270度（-270deg）、顺时针旋转90度（90deg）都是一样的效果，都会归为90deg。但是当使用动画时，这些角度值就非常重要了。

CSS的旋转主要依赖于 transform 属性中的 rotate() 、rotate3d、 skew() 等方法。只需给它们传递旋转的角度即可。

除了旋转会使用角度之外，线性渐变也会经常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全称为 Degress，表示度，一个圆总共360度。

transform: rotate(2deg);

（2）grad

grad 全称为 Gradians，表示梯度，一个圆总共400梯度。

transform: rotate(2grad);

（4）rad

rad 全称为 Radians，表示弧度，一个圆总共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全称为 Turns，表示圈（转），一个圆总共一圈（转）。

transform:rotate(.5turn);

7. 百分比单位

百分比（%）也是我们比较常用的单位之一，所有接受长度值的属性都可以使用百分比单位。但是不同属性使用该单位的效果可能并不一样。但是都需要有一个参照值，也就是说百分比值是一个相对的值。

下面来看看常见场景中的百分比单位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的属性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。这些属性在使用百分比时，参照物不尽相同：

width、max-width、min-width：值为百分比时，其相对于包含块的 width 进行计算；
height、max-height、min-height：值为百分比时，其相对于包含块的 height 进行计算；
padding、margin：值为百分比时，如果是水平的值，就是相对于包含块的 width 进行计算；如果是垂直的值，就是相对于包含块的 height 进行计算。

（2）文本中的百分比

在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。这些属性在使用百分比时，参照物不尽相同：

font-size：根据父元素的font-size 进行计算；
line-height：根据font-size进行计算；
vertical-align：根据line-height进行计算；
text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块的同方向的width和height。不同定位的包含块不尽相同：

如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器；
如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素；
如果元素为固定定位（ fixed ），包含块就是视窗（ viewport ）。

（4）变换中的百分比

CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比。

translateX() 根据容器的 width 计算
translateY() 根据容器的 height 计算
transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算

注意，在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。

前端开发中，会涉及到许多与像素相关的概念，这些概念在不同的场景下有不同的应用，理解它们对我们开发高质量的网页和应用至关重要。本文将带你详细解析设备像素、CSS像素、设备独立像素、DPR和PPI之间的区别，并通过示例代码来说明它们的实际应用。

1. 什么是设备像素（Device Pixel）？

设备像素是设备显示屏上最小的物理显示单元，无论是显示文字、图像还是任何其他内容，都需要使用这些最基本的单位。

例如，一个1920x1080分辨率的显示器拥有1920个水平设备像素和1080个垂直设备像素，总共有超过200万个设备像素。

2. 什么是CSS像素（CSS Pixel）？

CSS像素是一个与设备无关、标准化的测量单位，定义了CSS样式在屏幕上应该占据的空间。例如，当你在CSS中定义一个元素宽度为100px，这里的100px指的就是CSS像素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS像素示例</title>
<style>
  .box {
    width: 100px; /* 100 CSS像素 */
    height: 100px; /* 100 CSS像素 */
    background-color: lightblue;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这个示例中，.box的宽度和高度均为100 CSS像素。

3. 什么是设备独立像素（Device Independent Pixel, DIP）？

设备独立像素（DIP），也称虚拟像素，是一种抽象的单位，用于确保在高DPI（每英寸像素数）屏幕上的尺寸一致性。现代浏览器和设备通过将CSS像素映射到设备像素来实现这一效果，从而在不同的设备上呈现一致的视觉效果。

4. 什么是设备像素比（Device Pixel Ratio, DPR）？

设备像素比（DPR）是设备像素和CSS像素之间的比例。DPR用于定义设备上一个CSS像素对应的物理像素数。DPR的值可以通过window.devicePixelRatio来获取。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取DPR示例</title>
</head>
<body>
  <script>
    console.log(`设备像素比DPR: ${window.devicePixelRatio}`);
  </script>
</body>
</html>

在这个示例中，通过window.devicePixelRatio可以获取当前设备的DPR值。

5. 什么是每英寸像素数（Pixels Per Inch, PPI）？

每英寸像素数（PPI）用于衡量屏幕的像素密度，表示每英寸所包含的像素数。PPI越高，屏幕显示的图像越细腻、越清晰。

6. 示例代码：解析不同设备的像素差异

为了更好地理解以上概念，我们构建一个实战示例，通过在不同DPI设备上的布局来说明这些概念如何影响实际开发。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备像素与CSS像素示例</title>
<style>
  .container {
    width: 300px; /* CSS像素 */
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
  }
  .device-pixel-box {
    width: 300px; /* CSS像素 */
    height: 50px; /* CSS像素 */
    background-color: coral;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>设备像素与CSS像素示例</h1>
    <div class="device-pixel-box"></div>
    <p>设备像素比DPR: <span id="dpr"></span></p>
    <p>屏幕PPI: <span id="ppi"></span></p>
  </div>

  <script>
    // 获取DPR
    const dpr = window.devicePixelRatio;
    document.getElementById('dpr').textContent = dpr;
    
    // 计算PPI（假设屏幕对角线尺寸为15.6英寸，1920x1080分辨率）
    const screenDiagonalInches = 15.6;
    const screenWidthPixels = window.screen.width * dpr;
    const screenHeightPixels = window.screen.height * dpr;
    const screenResolution = Math.sqrt(screenWidthPixels**2 + screenHeightPixels**2);
    const ppi = screenResolution / screenDiagonalInches;
    document.getElementById('ppi').textContent = ppi.toFixed(2);
  </script>
</body>
</html>

在这个示例中：

.device-pixel-box的宽度和高度均为300 CSS像素。
通过JavaScript获取当前设备的DPR和计算屏幕的PPI，并在页面中显示出来。

总结

掌握设备像素、CSS像素、设备独立像素、DPR和PPI之间的区别和联系，是前端开发者的必备技能。这些概念虽然专业性较强，但却是开发高质量、跨设备适应性强的Web应用的基础。通过本文的详细解析和示例代码，希望能帮助你更好地理解这些概念，并在实际开发中灵活应用。

在实际项目中，理解和正确使用这些概念，不仅能提升应用的视觉效果，还能增强用户体验。如果你在开发过程中有任何疑问或不同的见解，欢迎在评论区留言交流。

日常开发中，px一定是大家接触过最多的css单位，但是你真的了解px嘛？1px在屏幕中到底是多大呢？另外不知道大家有没有过下面这些疑惑:

为什么一个元素在pc上和移动端的物理尺寸不一样，但是两者的视觉效果上却差不多呢？改变屏幕的分辨率时，屏幕上显示的内容大小为什么会跟着改变？缩放浏览器时，浏览器中的内容的大小为什么会跟着改变？

想回答以上问题，我们就要知道css中的px到底指的是什么？

什么是css px?

在回答什么是css px之前，我们先要了解两个概念——设备像素和参考像素。

设备像素(device pixel)

来看这张显示器屏幕的放大图。

从图中可以看到，显示器屏幕实际上是由一个一个"点"组成的（每个"点"又包含3个单位，也称三元素组)，这些"点"就是设备像素。

需要注意的是,device pixel实际是可以"变化"的，当你降低设备分辨率时，一个"点"就需要更多的三元素组来组成，此时"点"的物理尺寸就增大了。以下是维基百科关于这点的说明，想了解更多，请点击这里查看。

因为多数计算机显示屏的分辨率可以通过计算机的操作系统来调节，显示屏像素的分辨率可能不是一个绝对的衡量标准。

现代液晶显示屏按设计有一个原始分辨率，它代表像素和三元素组之间的完美匹配。

对于该显示器，原始分辨率能够产生最精细的视频。但是因为用户可以调整分辨率，显示器必须能够显示其它分辨率。非原始分辨率必须通过在液晶显示屏上拟合重新取样来实现，要使用插值算法。这经常会使显示屏看起来破碎或模糊。例如，原始分辨率为1280×1024的显示器在分辨率为1280×1024时看起来最好，也可以通过用几个物理三元素组来表示一个像素以显示800×600，但可能无法完全显示1600×1200的分辨率，因为物理三元素组不够。

由于不同的设备屏幕分辨率和尺寸可能不一样，所以设备上物理像素的大小也就不一样。但是对于css来说，它希望在所有的设备上元素的显示效果看起来都是差不多的。

那怎么才能让同一元素在不同的设备上显示的效果差不多呢？w3c提出了一个概念，也就是下面将要介绍的参考像素(reference pixel)。

参考像素(reference pixel)

从上面这幅图可以看到，近处的铁轨看起来很大，而远处的铁轨看起来很小。这是由于我们眼睛的视角所产生"近大远小"的透视现象所造成的。

那设想一下，如果远处的铁轨比近处的铁轨尺寸大一些，是不是我们看远处的铁轨就和看近处的差不多大了呢。

css参考像素(reference pixel)就是应用了这个原理，w3c是这样定义参考像素的

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees.

注意了，css参考像素它是一个visual angle，即一个约等于0.0213度的角。当设备的典型观看距离越远时，参考像素就越大（注意这里的大，不是指视角变大，而是角度对应在屏幕上的尺寸变大）。

在介绍完设备像素和参考像素之后，下面该轮到今天的主角——css像素出场了。

css像素(css pixel)

顾名思义，css pixel是css样式表语言中用来表示长度的一个单位，类似的单位还有pt,in,cm等。像pt,in,cm等都是物理单位，相对好理解，而px则有点抽象。

一个px到底是多大? 它又和pt,in,cm的长度等有什么联系呢？这些都是亟待我们思考的问题。

在思考这些问题之前，先看下面这段w3c规范

For a CSS device, these dimensions（指in,pt,px等length单位） are either anchored by relating the physical units to their physical measurements, or by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

对于css length单位（当然也包括px）来说，不同的分辨率设备对它们的影响是不同的。

对高分辨率显示设备（如打印机），length的anchor unit(可以理解为基准单位)推荐使用基于物理测量的inches,centimeters等。而对于低分辨率的设备(如电脑显示器)，anchor unit推荐使用pixel单位。下面具体来讲讲这两者的区别：

高分辨率设备（high-resolution devices）

关于分辨率的东西这里不多讲，不熟悉的同学可以点击这里查看。我们之前说了，对于高分辨的显示设备，基准单位是基于物理测量的inches, centimeters。

基于物理测量是什么意思呢？就是它实际的物理长度。如单位cm，用css设置一个盒子的宽度为1cm,那它就等于物理上的1cm，你用尺子去量，它就是1cm。

那现在问题来了，px呢？px怎么去基于物理测量呢？

这个问题我们结合w3c和mdn，就能得到解答:

Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.

现在知道了，在高分辨率设备下，1px就等于96分之一英寸，约等于0.2646mm。

低分辨率设备（low-resolution devices）

对于低分辨率设备来说，anchor unit是基于pixel unit的，那pixel unit又是什么呢？如果有仔细看过css像素那小节里引用w3c的那段说明的话，答案你应该已经知道了。为了说明方便，还是把那句最重要的话再写一遍。

For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

这句话非常重要！！！

可以说理解了这句话，你就基本上理解了什么是css像素。这里为了照顾部分英语不好的同学，我把这句话翻译一遍

对于这样的设备（这里指低分辨率设备），建议像素单位参考最接近参考像素的整数个设备像素。

我们举个例子来说明一下，一个分辨率为1680 * 1050的22寸电脑显示器。对于电脑显示器来说，它的参考像素约为0.26mm(这个值的大小由设备的典型视距决定，出厂时已经确定)。

确定了参考像素之后，再来计算设备像素。通过分辨率和尺寸，计算出该显示器的ppi

为90.05，此时一个设备像素的值就等于0.28mm。

对比这两个像素值之后发现，一个设备像素的值是最接近参考像素的。所以对于这个设备来说，一个像素单位(1px)就等于一个设备像素。

到这里，相信大家对css px是什么应该有了一个基本的概念。下面我们通过分析文章开始时提出的几个问题，来进一步加深对css px的印象。

分析问题

（1）为什么一个元素在pc上和移动端的物理尺寸不一样，但是两者的视觉效果上却差不多呢？

因为css px是基于参考像素确定的，而参考像素就是为了让同一元素在不同设备上显示效果尽量一致而设计的（对于移动端和pc端来说，参考像素的物理大小肯定不一样，但是显示效果基本是一致的）。所以同一个元素，尽管在pc端和移动端尺寸不一样，但视觉效果却是差不多的。

（2）当改变屏幕的分辨率时，屏幕上显示的内容大小为什么会跟着改变？

我们举一个例子来说明这个问题，还是以上面那个典型的22寸显示器为例：

正常分辨率下，即1680 * 1050，此时的ppi是90.05，那一个device pixel的长度就约为0.28mm。这时一个device pixel就约等于一个参考像素对应的大小。如果你用css定义了一个盒子宽为375px，此时你用尺子去屏幕上量，会发现375px盒子的实际宽度是0.28(mm) * 375 ≈ 10.5cm。调整显示器的分辨率为1024 * 640时，此时一个device pixel对应的长度是0.46mm，虽然它和参考像素对应的大小有差距，但是没办法，你还得使用它，毕竟它现在就是最接近参考像素大小的device pixel了。上面那个375px的盒子，此时的实际宽度则为0.46 * 375 ≈ 17.4cm。所以降低分辨率之后，相同的内容会显得大了。调整显示器的分辨率为1920 * 1080，此时一个device pixel对应的长度是0.25mm，此时375px的盒子实际宽度是0.25 * 375 ≈ 9.3cm，所以提高分辨率后，内容自然就变小了。

（3）当你缩放浏览器大小时，浏览器中的内容的大小会跟着改变？

这个现象，ppk在之前的一篇文章里提到过。缩放浏览器时，也就相当于改变了浏览器的分辨率，所以这个问题和第2个一样，这里也就不多赘述了。

总结

1.对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素。

2.对于高分辨率设备(打印机)来说，1个css像素就是96分之一英寸。

3.参考像素(reference pixel)就是从一臂之遥看解析度为96DPI的设备时，1个设备像素的视角（但为了方便计算，都把这个视角转换为其在显示设备上对应的大小）。

3.在低分辨率设备中，pt,cm,in等单位的大小不等于它的物理大小，它们的大小需要px（这时等于xx个设备像素）来进行转换，如1in此时等于96个设备像素的大小(即96px)。

4.在高分辨率设备中，1px也不等于xx个设备像素，px的大小就等于固定值。

5.设备像素(device pixel)不是固定不变的，除非你的设备不能调整分辨率。

参考文献：

A tale of two viewports — part one

w3c css规范

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

wiki pixel

wiki 液晶显示器

移动端高清、多屏适配方案

rethinking the pixel it‘s all relative now

A Pixel Identity Crisis

作者：淼淼真人
链接：http://www.imooc.com/article/details/id/75237
来源：慕课网

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商