一、像素(px)
像素是最常用的CSS单位之一，因为它是一个固定的单位，不会因为浏览器大小的改变而改变。
在网站布局中，像素可以用于设置元素的宽度、高度、边框、内距、外距、字体大小等。但是，当用户的屏幕分辨率发生变化时，像素大小可能会导致网站内容看起来过大或者过小。
在使用像素单位时，尽量使用相对大小的像素（rem），而不是绝对大小的像素（px），可以提高响应性和可访问性的用户体验。
/* 使用相对大小的像素 */
.box {
font-size: 1rem;
margin: 1rem;
}
二、相对大小的像素（rem）
相对大小的像素（rem）是相对于根元素（HTML）的字体大小而言的，因此它们能够根据用户设置的字体大小而动态调整大小。
使用rem单位，可以有效解决页面缩放带来的问题，而且可以使用媒体查询来在不同的设备上针对不同的字体大小调整响应式布局。
使用rem单位，可以提高页面的可访问性，使用户可以更自由地自定义页面字体大小。
/* 使用rem单位 */
.box {
font-size: 1.4rem; /* 相对于根元素的字体大小 */
margin: 1rem;
}
三、视窗宽度单位（vw）
视窗宽度单位（vw）表示相对于视口宽度的一个百分比，其中1vw等于视口宽度的1%。
视窗宽度单位非常适合使用在响应式布局中，可以让网站上的元素相对于视口缩放，适应不同尺寸的设备。
视窗宽度单位还可以与媒体查询一起使用，为不同的屏幕宽度设置不同的样式，从而提高网站的响应性。
/* 使用vw单位 */
.box {
width: 50vw; /* 相对于视口宽度的50% */
margin: 1rem;
}
四、视窗高度单位（vh）
视窗高度单位（vh）表示相对于视口高度的一个百分比，其中1vh等于视口高度的1%。
和视窗宽度单位相比，视窗高度单位在响应式布局中并不是那么常用，但是它们仍然可以用于设置元素的高度。如果你想要元素充满整个屏幕，或者你想要在屏幕上上下固定某些区域的元素，那么视窗高度单位可以派上用场。
/* 使用vh单位 */
.box {
height: 50vh; /* 相对于视口高度的50% */
margin: 1rem;
}
五、字体相对大小单位（em）
字体相对大小单位（em）表示相对于父元素字体大小的一个倍数，如果父元素没有设置字体大小，则相对于根元素的字体大小。
字体相对大小单位非常适合用于设计弹性、可伸缩的页面，也可以使用媒体查询来针对不同的屏幕尺寸设置不同的字体大小。
/* 使用em单位 */
.parent {
font-size: 1.2rem;
}
.child {
font-size: 1.5em; /* 相对于父元素字体大小的1.5倍 */
margin: 1rem;
}
六、字符宽度单位（ch）
字符宽度单位（ch）表示相对于数字字符“0”的宽度，例如1ch等于数字字符“0”的宽度。
字符宽度单位在设计列宽时非常方便，尤其是在需要保持表格一致的列宽时，并且可以使用媒体查询来针对不同屏幕尺寸设置不同的列宽。
/* 使用ch单位 */
th, td {
width: 20ch; /* 相对于数字字符“0”的20倍 */
padding: .5rem;
}
七、百分比单位（%）
百分比单位（%）与vw和vh类似，但是相对于最近的定位元素而言，而不是视口。
百分比单位非常适合用于自适应布局，可以从父元素继承具有弹性的宽度和高度。
/* 使用百分比单位 */
.container {
width: 90%; /* 相对于父元素宽度的90% */
margin: 0 auto;
}
结论
在使用CSS单位时，应该根据自己的需求选择不同的单位，以提高网站的可访问性和响应性。大多数情况下，使用相对大小的单位（rem、vw、vh、em、ch）是最佳实践。
在设置字体大小时，建议使用相对大小的单位（rem、em），而不是像素（px），因为像素单位的大小不会随着用户的字体设置而变化。
在设计自适应布局时，建议使用百分比单位（%），以便元素可以根据父元素的大小来调整自身大小。