HTML 长度大小单位
px
固定尺寸单位：px（像素）
其大小不会随着页面缩放或者父元素尺寸的改变而变化。它的优势在于能够精准地控制元素大小，特别适合用于那些对尺寸精度要求高的场景，像绘制图标、设置边框宽度等。
然而，它也存在明显的劣势，在响应式设计中，使用 px 可能会使页面在不同设备上的显示效果不佳。
rem
相对单位：rem（根元素字体大小）
相对于根元素（即 <html> 元素）字体大小的单位。通过设置根元素的字体大小，能够实现全局的尺寸调整。这一特性使得它非常适合用于响应式布局。
例如，在移动端适配时，可以借助媒体查询来动态修改根元素的字体大小。
/* 基础设置 */
html {
font-size: 16px;
}
.container {
width: 20rem; /* 相当于 320px */
}
/* 在小屏幕设备上调整根字体大小 */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}em
相对单位：em（父元素字体大小）
与元素的父元素字体大小相关。
它常用于实现局部的尺寸缩放，像按钮、标题等元素的尺寸设置。不过，由于 em 会继承父元素的字体大小，所以在嵌套层级较深的情况下，可能会使尺寸计算变得复杂。
.button {
font-size: 1.2em; /* 父元素字体大小的 1.2 倍 */
padding: 0.5em 1em; /* 内边距会随字体大小变化 */
}vh vw
vh 代表视口高度的百分比
vw 代表视口宽度的百分比
1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。
非常适合用于创建全屏布局或者那些需要根据视口大小进行缩放的元素。
.hero-banner {
height: 100vh; /* 全屏高度 */
width: 100vw; /* 全屏宽度 */
}
.sidebar {
width: 20vw; /* 视口宽度的 20% */
}vmin vmax
1vmin 等于视口短边的 1%
1vmax 等于视口长边的 1%
vmin 和 vmax 则会根据视口的横向或纵向动态选择宽度或高度的百分比。
vmin: 基于视口较短的一边。适合确保元素在任何屏幕方向下都不会溢出。
vmax: 基于视口较长的一边。适合让元素尽可能大地填充屏幕空间。
pt
磅值，常用于印刷品设计中。
表示打印出来的一个点，和像素不同，它不是固定的，而是基于印刷设备的分辨率和输出质量来计算的。
使用pt可能会导致不一致性，因为不同设备和浏览器的像素密度不同。
%
百分比
在前端开发中是一个动态单位，永远以当前元素的父元素作为参考进行计算。
可用于长度、定位、颜色。
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
color: rgba(100%,0%,0%,0.5);
background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}ch
数字0的宽度
当前元素所使用的字体中 “0” (零) 这个字符的平均宽度。
如果字体发生变化，或者字号发生变化，ch 单位所代表的实际像素值也会相应改变。
- 限制段落宽度以提高可读性： 多数研究表明，一行文本的最佳字符数在 45 到 75 个字符之间，以避免阅读时眼睛疲劳。使用
max-width: 60ch;可以很好地控制文本行的长度，使其在不同字号下保持相对舒适的阅读宽度。 - 输入框宽度： 当你需要一个输入框能够容纳特定数量的字符时，
ch单位非常有用，比如一个需要输入4位年份的输入框可以设置为width: 4ch;。 - 等宽字体（Monospace Fonts）： 对于等宽字体（例如代码编辑器中常用的字体），所有字符的宽度都是相同的，这时
ch单位的计算会非常精确，1ch就等于一个字符的宽度。
ex
小写x字母的高度
当前元素所使用的字体中 小写字母“x”的高度。
- 垂直对齐： 它可以用于将小图标或特殊字符与周围文本的基线对齐。
- 文本装饰： 理论上可以用于一些文本下划线或上划线与文本的相对位置调整，但实际上不如
em或rem灵活。 - 某些数学或科学排版： 在需要精确控制上下标或特殊符号与文本主体的垂直关系时，
ex可能是一个选择。
rpx
微信小程序特有的尺寸单位，它会根据屏幕宽度进行自适应调整。
在微信小程序里，默认将屏幕宽度划分为 750 个 rpx。这就意味着在不同屏幕尺寸的设备上，相同的 rpx 值能够呈现出相近的视觉效果。
view {
width: 375rpx; /* 在任何设备上都约占屏幕宽度的一半 */
}