Appearance
简述 pt、px、em、rem、%、vw、vh、rpx 的区别？
1.物理像素、逻辑像素
| 英寸 | 物理像素分辨率 | 逻辑像素分辨率 | ppi | 设备像素比 | |
|---|---|---|---|---|---|
| iPhone 6 | 4.7 | 750x1334 | 375x667 | 326 | 2 |
- 物理像素（ 设备像素 DP(device pixels)）：物理像素是显示屏上的小点，用来显示图像和文字；（例如 iPhone 6 的屏幕分辨率是 750 x 1334 像素，因此它的物理像素数量是 750 x 1334）
- 逻辑像素，也称为设备独立像素或 CSS 像素，是计算机图形和显示领域中的一种虚拟像素单位。通常在 CSS 中以"px"表示。
物理像素是硬件单位，逻辑像素是软件单位。
点（point）通常对应于一个物理像素，但在高分辨率（Retina）屏幕上，一个点可以对应多个物理像素（例如 在 iPhone 6 上，一个点通常对应于 4 个物理像素）
像素比（DPR） 像素比 = 物理像素/逻辑像素 （例如 在 iPhone 6 上，
物理像素 750 / 逻辑像素 375 = 2）分辨率像素点总数即为分辨率(逻辑分辨率、物理分辨率)
像素密度（PPI）每英寸所拥有的像素数量，PPI 值越高，画面的细节就会越丰富。
PPI = √(750^2 + 1334^2) / 4.7 ≈ 332
2.单位
- pt：在 iOS 开发中，"pt" 通常指的是逻辑像素。pt 的大小与屏幕的尺寸有关，可以简单理解为长度单位；
- px(pixel)：是像素的缩写，代表设备或图像上的最小点。在网页设计中 px 是常用的基本单位，可用于固定布局或元素大小。它的缺点是缺乏弹性，不适应不同屏幕大小的变化。
- em：em 是相对单位，它的值相对于其父元素的字体大小。如果没有设置字体大小，em 将相对于浏览器默认字体大小。（父元素的字体大小为 1em）
- rem：rem 是相对单位，相对于根元素（通常是
<html>元素）的字体大小。这使得 rem 在响应式设计中非常有用（屏幕大小变化时改变根元素的 font-size 即可）。 - %： 百分比（%） 通常相对于其父元素来计算。
- 对于
position: absolute;的元素，它的百分比位置通常是相对于其最近的已定位的（position不是static）父元素来计算的。 - 对于
position: fixed;的元素，百分比位置是相对于视口（可视窗口）的大小来计算的，而不是父元素。 - 对于垂直方向的
margin和padding，它们的百分比值是相对于元素的宽度计算的，而不是相对于高度。
- 对于
- vw、vh：相对单位
- vh ，无论视口高度多少，都将视口高均分为 100 份，每 1 小份就是 1vh
- vw ，无论视口宽度多少，都将视口宽均分为 100 份，每 1 小份就是 1vw
- rpx：小程序专用相对单位，用于在不同设备上实现响应式布局。1rpx 在不同设备上会自动转换成不同的物理像素，以适应不同的屏幕密度。（永远按照 750 来进行映射，例如 75rpx 是 750 的十分之一，如果在 375 的屏幕上，则会映射成 37.5）