7个鲜为人知的CSS单位

在CSS的世界里，我们熟知一些常用的单位，如px、em等。然而，还有一些鲜为人知的单位，它们在特定场景下能发挥独特的作用。

1. vw和vh vw（viewport width）和vh（viewport height）分别表示视口宽度和高度的百分比。例如，10vw表示视口宽度的10%。使用它们可以轻松实现响应式布局，使元素根据屏幕大小自适应。比如制作全屏背景图片，设置其宽度为100vw，高度为100vh即可。

2. vmin和vmax vmin是视口宽度和高度中较小值的百分比，vmax则是较大值的百分比。当需要确保元素在不同屏幕比例下保持相对一致的大小关系时，这两个单位就很有用。比如，设置一个正方形元素，边长为50vmin，它会根据视口较小的一边自适应大小。

3. rem rem（root em）是相对于根元素（html元素）字体大小的单位。与em不同，em是相对于父元素字体大小，而rem只与根元素相关。通过设置根元素的字体大小，就能方便地统一调整整个页面元素的大小。

4. ch ch单位基于字符“0”的宽度。在处理等宽字体的文本布局时很实用。例如，设置一个文本框宽度为20ch，它将能容纳大约20个字符。

5. ex ex是当前字体中小写字母“x”的高度。常用于一些对垂直间距有精确要求的场景，比如设置行高。

6. cm、mm、in cm（厘米）、mm（毫米）和in（英寸）是绝对长度单位。在一些需要精确物理尺寸的打印样式或特定设计中会用到。

7. turn turn用于表示旋转角度，1turn等于360度。在CSS的transform属性中，使用turn单位可以更直观地设置元素的旋转角度。

了解并合理运用这些鲜为人知的CSS单位，能让我们在网页设计和布局中更加灵活和高效，为用户带来更好的视觉体验。