一、定义
一个表总结：
| 名称 | 定义 | 使用示例 |
| viewpoint | 是指用户在网页上实际可见和可交互的区域，通常指的是浏览器窗口或移动设备的屏幕尺寸。 | width：100vw；height：100vh |
| rem | （root em）是相对于根元素（通常是 <html> 元素）的字体大小来计算的单位。 |
width：100rem；height：100rem |
| 百分比 | 是相对于父元素的尺寸来计算所占大小 | width：100%；height：100% |
| px | 像素 | width：100px；height：100px |
二、viewpoint 与 rem 的差异
- 单位类型：
rem（root em）是相对于根元素（通常是<html>元素）的字体大小来计算的单位。viewport是指用户在网页上实际可见和可交互的区域，通常指的是浏览器窗口或移动设备的屏幕尺寸。
- 适用范围：
rem主要用于设置字体大小和元素尺寸，它是相对于根元素的字体大小来计算的，可以用于实现相对于根元素的等比缩放。viewport主要用于控制网页在移动设备上的显示效果，通过<meta>标签设置 viewport，以确保页面在不同设备上以正确的比例显示，并控制用户是否可以缩放页面。
- 计算方式：
rem的计算是相对于根元素的字体大小，例如，1rem等于根元素的字体大小。viewport的计算是相对于视口的大小，例如，1vw等于视口宽度的 1%。
- 应用场景：
rem通常用于实现相对于根元素的等比缩放，特别适用于响应式设计。viewport用于控制网页在移动设备上的显示效果，确保页面在不同设备上以正确的比例显示，并控制用户是否可以缩放页面
三、viewpoint 与 百分比 的差异
- 基准不同：
- 百分比是相对于父元素的尺寸来计算的，而vw/vh是相对于视口的尺寸来计算的。
- 如果父元素的尺寸与视口尺寸相同，那么百分比和vw/vh可能会产生相似的效果。但如果父元素的尺寸与视口尺寸不同，那么它们就会产生不同的效果。
- 响应式性：
- 使用vw/vh更具有响应式的特性，因为它们是相对于视口的大小来计算的，可以随着视口的变化而变化，从而更好地适应不同设备的屏幕尺寸。
- 百分比相对于父元素的大小计算，如果父元素的大小发生变化，那么百分比计算出的大小也会相应变化，但它不直接与视口大小相关联。
- 用途不同：
- 在某些情况下，使用百分比可能更适合，特别是当元素的尺寸应该相对于其父元素而不是整个视口时。
- 使用vw/vh通常更适合于实现基于视口大小的布局和设计，尤其是在移动设备上。
四、像素（px）
一块屏幕的能显示的部分都是由一个一个的像素点构成的。在网页和UI中，这也是不可再细分的单位，也是最小的单位。
上述 viewpoint、 rem、em、百分比 其实本质上都是要确定需要在屏幕上使用多少个宽度像素作为一个基准单位来适应不同屏幕大小，以正常显示网页内容。
像素是图像显示和数字图形处理中的基本单位，用于描述图像的分辨率和清晰度。一个像素代表图像中的一个最小的、不可分割的点或颜色单元，是构成数字图像的基本单元之一。
在计算机图形学中，像素通常表示为一个有限的方块或矩形区域，每个像素可以包含一个颜色值，用于描述图像在该点的色调、亮度和饱和度等信息。根据颜色深度的不同，每个像素可以包含不同位数的颜色信息，例如 8 位颜色（256 色）、24 位真彩色（约 1677 万色）等。
像素密度指的是每英寸包含的像素数量，通常表示为每英寸的像素数（PPI，Pixels Per Inch）。像素密度越高，图像显示的细节和清晰度就会更高，比如高分辨率的 Retina 显示屏就有更高的像素密度。
在不同的设备和显示器中，像素的大小和显示方式可能有所不同。例如，传统液晶显示器中的像素是一个固定大小的点，而在 Retina 显示屏等高密度显示器中，一个逻辑像素可能会对应多个物理像素，以提供更高清晰度的显示效果。
总的来说，像素是数字图像中描述图形、图像和文本的基本单元，它在计算机视觉、数字图形处理、网页设计等领域都有着重要的作用。我们通过调整像素的颜色、位置和密度等属性，可以创造出各种丰富多彩的视觉效果。
