1. vh
CSS中常见的长度单位有px、em、rem等，但是你可能不知道还有一种非常有用的单位vh（视口高度）。vh单位是指视口高度的百分比，1vh等于视口高度的1%。
使用vh单位可以使得元素的大小相对于视口变化，无论视口的大小如何，元素的大小会自动适应。这在响应式布局中非常有用，特别是在移动设备上。比如下面的代码可以使得一个元素的高度为视口高度的50%：
.element {
height: 50vh;
}
2. vmin
同样是相对于视口的单位，vmin可以根据视口的宽度和高度中较小的那个来设置元素的大小。也就是说，1vmin等于视口宽度和高度中较小那个的1%。
使用vmin单位可以实现元素在不同尺寸的设备上保持相对大小，避免了元素过大或者过小的问题。比如以下代码可以让一个元素的宽度和高度都是视口宽度和高度中较小那个的50%：
.element {
width: 50vmin;
height: 50vmin;
}
3. vw
与vh和vmin相似，vw也是相对于视口的单位，但是它表示视口宽度的百分比。1vw等于视口宽度的1%。
使用vw单位可以实现元素的宽度随着视口宽度的变化而变化，这在移动设备上也非常有用。比如下面的代码可以使一个元素的宽度为视口宽度的50%：
.element {
width: 50vw;
}
4. fr
fr单位是CSS Grid Layout的单位之一，它表示可用空间的一部分。一个容器被分为一列或一行的多个fr单位，可用空间会被按照指定的比例分配给这些单位。
fr单位非常灵活，可以使得网格布局适应不同尺寸的设备和内容的变化。比如以下代码会将一个容器分为两列，第一列占据可用空间的1/3，第二列占据可用空间的2/3：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
5. ch
ch单位是指当前字体的宽度，它是相对于数字0的宽度而言的。在大多数等宽字体中，1ch等于数字0的宽度。
使用ch单位可以使得文本输入框的宽度根据内容自动变化，而不会出现溢出或者留白。比如以下代码可以使得一个输入框的宽度为10个字符的宽度：
.input {
width: 10ch;
}
6. ex
ex单位是相对于字体的x-height的高度。x-height是字体中小写字母x的高度。1ex等于x-height的高度。
使用ex单位可以实现元素的高度相对于字体的大小变化。比如以下代码会将一个元素的高度设置为当前字体大小的1.5倍：
.element {
height: 1.5ex;
}
7. rem
rem单位是相对于根元素的字体大小的单位。根元素是HTML文档的根节点，通常情况下指的是标签。
使用rem单位可以方便地实现整个页面的响应式布局。比如以下代码会将一个元素的宽度设置为根元素字体大小的2倍：
.element {
width: 2rem;
}
总结
以上是7个你可能不认识的CSS单位，它们在不同的场景中能够提供更加灵活的布局和样式控制。理解和使用这些单位可以帮助你更好地构建响应式的网页和应用。