像素（CSS 中的 px）到底是什么

参考：知乎 (opens in a new tab)

前言

作为一个前端开发，当然不管是什么开发，我们都生活在“屏幕”的前后左右、里里外外，屏幕上呈现物体的尺寸当然也需要关心一下啦

要从最直接看到的屏幕说起，由密密麻麻的发光“小灯”同时发光产生了画面（LED 屏幕发光常识就不多赘述了），屏幕的尺寸（发光单元的数量，也就是物理像素）各有不同，不同尺寸的屏幕决定了我们观看这个设备的距离（我们可能在越远的地方看越大的屏幕），在越远的时候我们要考虑放大在小屏幕上的物体，但是如果在同样的观看距离下，大屏幕看的内容应该要更多而不是更大，这样才会更加合理（比如在平板和手机上）。

接着我们看一下软件开发中的像素尺寸。要适配不同物理像素的设备总不能每个尺寸去开发吧，想想我们写 css 的时候也只是写一份，就能在 pc 和手机上看的比较舒服了（比如字体大小），这是因为实际上通过软硬件结合，会将开发时的像素转变为实际输出在屏幕上的物理像素，这些像素到底是如何定义的呢，首先我们要搞清楚这些像素概念以及之间的关系。

CSS 中的 px 是什么 pixel

先说结论：

px 是 viewport 像素

不是物理像素、逻辑像素、渲染像素

物理像素、逻辑像素、渲染像素的关系

下图转载自知乎，逻辑像素就是图中的像素（points）

**物理像素（physical pixel）：**直观的反映显示屏的硬件条件，发光元件的数量

**渲染像素（render pixel）：**系统内部对物理像素的分配，pc 上就是设置的屏幕分辨率，然后进行采样到物理像素，显示在屏幕上。显示设备会用“缩放引擎”来渲染不同渲染尺寸，一般会有推荐的分辨率，也就是最大渲染像素，也是设备的物理分辨率。软硬件结合，便硬件的解决方案，有些设备不能设置渲染像素。

逻辑像素/点（device point / device pixel / point）：是为了调和距离不一样导致的差异，将所有设备根据距离，透视缩放到一个相等水平的观看距离之后得到的尺寸，是一个抽象的概念，就是对于同一类设备不同尺寸屏幕在不同距离上都能看的差不多感觉，这个单位就是 ios 开发的 px，安卓开发的 dp。对于 pc，包括 win（8+） linux，mac，由各自系统的或者对应软件（比如 webview 内部）提供的图像界面处理引擎处理进行缩放（注意还没有提到浏览器网页开发）。总结来说就是软件可以用的视觉尺寸。

各种设备，手机，平板，笔记本等逻辑像素

• 手机：逻辑像素在 3xx-4xx（短边）之间
• 平板：10 寸平板 7xx-8xx（短边）
• 笔记本：13 寸 1280 （长边）
• 24 寸显示屏：1920（长边）

如果设置 width=device-width 下，无论是否高分屏，在浏览器得到的 screen.width 仍然符合上述的尺寸

【物理分辨率】是硬件所支持的分辨率，【逻辑分辨率】是软件可以达到的分辨率。

**ppi（pixel per inch）：**ppi 越高意味着屏幕清晰度更加，所谓的高分屏，就是 ppi 大于同类设备的屏幕，对于桌面设备，大于 96ppi，移动设备大于 160pp；所谓视网膜屏幕，超出人类辨认能力的屏幕，桌面设备大于 192ppi，移动设备大于 326ppi。

对于移动设备 160ppi 为一个档次。当然生产标准不一致，不可能做到绝对的标准，所以 ppi 等级是动态划分的。

同一个尺寸的屏幕，如果观看距离一样，不考虑 ppi ，他们的逻辑像素是一致的 = 物理像素长度 * 160 除以 ppi

**dpr（device pixel ratio）：**渲染像素与逻辑像素的比例，注意这里和window.devicePixelRatio的定义不一样。如果一般渲染像素等于逻辑像素的话，以 160ppi 为标准，dpr = ppi / 160

多少倍屏或者多少 x ，就是 dpr

**viewport 像素：**本质是 DIP（Device independent pixel），设备无关像素，与上述像素都无绝对逻辑关系的一个单位。其实是浏览器内部对逻辑像素进行再次处理的结果，简单来说是调整逻辑像素的缩放来达到适应设备的中间层。。。

对于 pc，viewport 是不生效的，所以在 pc 上，px 其实就是逻辑像素（chrome），而不是 viewport 像素。

在进行页面缩放的时候，css 的 px 是不变的，只是其对应的物理像素个数发生了变化，是由浏览器做的变化

浏览器的 viewport 是什么

在浏览器中，viewport 中文译过来叫视口？？是指可以看到 Web 内容的窗口区域，通常与渲染出的页面的大小不同，一个页面很长很长，这种情况下，浏览器会提供滚动条以滚动访问所有内容。

大白话就是人眼能看到（view）的入口部分（port）

viewport meta 标签

为什么要引入？

移动端的屏幕比较窄，浏览器通常先在一个虚拟窗口中渲染页面，然后将这个很大的页面（相对窄屏幕）缩放到手机屏幕大小，这样我们会在手机上有着和 pc 上“一样”的体验，仿佛是一台很小屏幕的电脑。。。

由于很多页面没有做移动端的优化，在小窗口渲染的时候就会很爆炸，那么我们就需要告诉移动端的浏览器在渲染的时候注意这一点，所以我们要用 meta 标签来描述 viewport 初始值信息

可以配置的信息

viewport, 它提供有关视口初始大小的提示，仅供移动设备使用。

• content 是一下内容的组合形式，用逗号隔开

  Value	可能值	描述
  width	一个正整数或者字符串 device-width	以 pixels（像素）为单位， 定义 viewport（视口）的宽度。
  height	一个正整数或者字符串 device-height	以 pixels（像素）为单位， 定义 viewport（视口）的高度。
  initial-scale	一个0.0 到10.0之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
  maximum-scale	一个0.0 到10.0之间的正数	定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
  minimum-scale	一个0.0 到10.0之间的正数	定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
  user-scalable	一个布尔值（yes 或者no）	如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>

面向逻辑像素开发

1. head 中设置 width=device-width，的 viewport
2. css 中使用 px
3. 适当的情况用 flex 布局，或者配合 vw 自适应
4. 跨设备的时候（px <-> 手机 <-> 平板）用 media query
5. 跨设备交互差异太大的话，考虑分开项目开发

设计稿中的 px

一般设计图都是用 iphone6 的尺寸，物理像素为 750px，逻辑像素是 375，dpr 是 2，那么我们要转换为逻辑像素要除以 2，叫做 2 倍图

有最简单的方法：设计师给你的图的物理宽度 w，除以一个数 x，如果得的出来的商在 360 - 414 之间，那么你换算的公式为【你在设计图测量出来的物理像素数除以 x】，那么 dpr 就是 x，也就是 x 倍图

说说 rem、rpx

rem 是之前 flexible 方案用来解决多尺寸适配的，但是现在人家都不维护了。

原理：相对长度单位。相对于根元素（即 html 元素）font-size 计算值的倍数的一个 css 单位，也就是我们 前端常说的适配单位 rem。因为 rem 的特性**相对长度单位，**常被用来做移动适配，pc 端页面不推荐使用 rem。

反正现在别用啦，都用 vx ，vxxx 来就行了

小程序也别用 rpx 了。。可以看https://www.jianshu.com/p/e8b66de2b7b5/ (opens in a new tab)

自适应与响应式

什么是自适应：葫芦娃大娃—变大变小（核心是宽度适应设备）

**什么是响应式：变形金刚——变成最适合的样子，大小，布局等，**方便操作、阅读（核心是根据宽度调整整体布局）

响应式布局：多套 CSS

不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或 CSS 自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。

自适应:一套 CSS

后话

这一篇说的很晕，关于尺寸，像素啥的，还是多读一读参考的知乎吧。。