写了几次 HTML 和 CSS，像素问题一直困扰着我，感觉一直没有完全搞清楚过，现在试着研究一下。

一、像素观感

我们显示器的像素和我们写 CSS 时候里面的像素是一个东西嘛？是一个东西。

我有两个 1080P 分辨率的屏幕，现在想知道一下 1080P 是个什么东西。1080p是一种视频显示格式，通常1080p的画面分辨率为1920×1080。

同样是 1080的屏幕，电脑上有一个选项，可以「缩放和布局」，看一看不同的缩放比例打开同一个网页有什么不同。

image.pngimage.png

屏幕 100% 缩放和屏幕 125% 缩放的对比

image.png image.png

前者像素宽度是 1920ox，后者像素宽度是 1536px，这意味着前者充分利用了更多的像素，后者利用得少一些。

  1. 1920 ÷ 1.25 = 1536

前者的实际屏幕大小是23.8英寸，后者的实际屏幕大小是 14 英寸，前者是后者的 1.7 倍。

  1. 23.8 ÷ 14 = 1.7

这可以推导出来，同样一个图标，理论前者的图标会更大一些，大 1.13 倍。

  1. 1.7 ÷ 1.5 = 1.13

后者的画质更细腻，细腻 1.7 倍，我手机也 1080P的，屏幕大小为 6.67 英寸，约细腻 3.57 倍。

  1. 23.8 ÷ 6.67 = 3.57 倍

二、截图看看

使用微信的截图把电脑的整块屏幕截图下来看看是什么情况。

两者都是 1920*1080，懂了，它是按照显示屏实际的像素截取的内容。

三、CSS 像素

写 CSS 的时候，大小的选取当然是取决人的实际观感。

在大屏幕的 100% 缩放下写出的 CSS 观感，与小屏幕的 125% 缩放做一次对比。

大屏幕的图标实际观感会大 1.13 倍，我觉得问题不大，相差不多。

（本文完）

「@浪里淘沙的小法师」