在 CSS 中，px（像素）是最常用的单位之一。它可以用于指定元素的宽高、位置、内外边距等。
CSS px 是什么？
px，全称 “pixel（像素）” 。px 就是一张图片中最小的点，或者是计算机屏幕最小的点。
举个例子，下面有一个绿叶网的图标（JPG格式），如下图 1 所示。如果将这个图标放大 n 倍，则此时效果如下图 2 所示。
我们会发现，原来一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（px）。一台计算机的分辨率是 800px × 600px，其实意思就是 “计算机宽是 800 个小方点，高是 600 个小方点”。
CSS 像素 vs 物理像素
很多初学的小伙伴可能会有这样一个疑问：“我的手机分辨率是2K，像素非常密集，为什么网页上的 16px 没有变成芝麻那么小呢？”
这是因为浏览器帮我们做了一次 “魔法转换”：
- 物理像素 (Physical Pixel)：屏幕上真实发光的小点。
- CSS 像素 (CSS Pixel)：浏览器渲染时的逻辑单位。
其中，转换关系（设备像素比 DPR）如下：
- 普通屏幕：1 CSS 像素 = 1 物理像素。
- 高清屏幕 (Retina/2x屏)：1 CSS 像素 = 4（2 x 2）物理像素。
- 超清屏幕 (3x屏)：1 CSS 像素 = 9（3 x 3）物理像素。
在现代 Web 开发中，我们只需要关心 “CSS 像素” 就可以了。浏览器会自动根据屏幕的清晰度（DPR），调用更多的物理像素来渲染这 1px，让它看起来更清晰、更锐利，但物理尺寸（视觉大小）保持不变。
px 的使用场景
px 是最容易理解的 CSS 单位，并且它的兼容性也非常好。不过 px 单位却存在以下 2 个缺点。
- 受屏幕分辨率的影响：在高分辨率屏幕上，px 单位会显得很小；而在低分辨率屏幕上，px 单位会显得很大。
- 响应式布局困难：使用 px 单位进行响应式布局比较困难，因为需要针对不同的屏幕分辨率编写不同的 CSS 代码。
为了解决 px 单位的缺点，可以使用其他 CSS 单位来代替，比如 em、rem、vw、vh 等。
| 单位 | 说明 |
|---|---|
| px | 绝对单位，一个像素点 |
| em | 相对单位，相对于父元素的字体大小 |
| rem | 相对单位，相对于根元素（html）的字体大小 |
| vw | 相对单位，视口宽度的 1% |
| vh | 相对单位，视口高度的 1% |
与 px 相比，em、rem、vw、vh 等单位更适合用于创建响应式布局，因为它们可以根据不同的屏幕尺寸和视口大小进行缩放。
1. 什么时候应该使用 px？
对于 px 来说，它适用于需要精确控制元素尺寸和位置的场景，比如：
- 边框：border: 1px solid #ccc;（没人希望边框随着屏幕变大而变粗）。
- 阴影：box-shadow: 5px 5px 10px black;。
- 极小的细节：比如 16x16 的图标。
- 固定宽度的侧边栏：在某些布局中，侧边栏宽度固定，内容区域自适应。
2. 什么时候尽量少用 px？
对于 px 来说，它不适用于以下场景：
- 需要创建响应式布局。
- 需要元素尺寸随屏幕或视口大小缩放。
提示: 在选择 CSS 单位时，我们应根据具体情况进行权衡。如果需要精确地控制元素的大小和位置，可以使用 px 单位。如果需要创建响应式布局，可以使用 em、rem、vw 或 vh 等单位。
