在开发网页时，我们经常需要使用 CSS 来定义元素的样式。CSS 中的单位可以分为相对单位和绝对单位两种类型。同时，为了让网页在不同设备上展示更好的自适应效果，我们还可以使用 rem 单位来实现自适应布局。
相对单位
相对单位是根据其他元素或者视口大小来计算的单位。它们的值相对于父元素的大小或者整个视口的大小。
em
em 是相对于当前元素的字体大小来计算的单位。当设置一个元素的 font-size 为 1em 时，它将与其父元素的字体大小相等。
.parent {
font-size: 16px;
}
.child {
font-size: 1em; /* 与父元素的字体大小相等，即 16px */
}
rem
rem 是相对于根元素（<html>）的字体大小来计算的单位。通过在根元素上设置 font-size，可以统一调整整个页面中所有 rem 单位的大小。
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 与根元素的字体大小相等，即 24px */
}
绝对单位
绝对单位是固定的单位，它们的值是一个固定的长度。无论元素的其他属性如何变化，它们的值始终保持不变。
px
px 是最常用的绝对单位，表示像素（pixel）。它的值是一个固定的长度，不会随着其他属性的变化而改变。
.child {
font-size: 16px;
width: 200px;
height: 150px;
}
cm、mm、in、pt、pc
除了 px，CSS 还提供了一些其他的绝对单位，如 cm（厘米）、mm（毫米）、in（英寸）、pt（点）和 pc（派卡）。这些单位可以根据实际需要选用，但在 Web 开发中很少使用。
rem 自适应布局
在移动设备上，由于屏幕的大小和分辨率各不相同，为了实现更好的自适应效果，我们可以使用 rem 单位来定义元素的大小和间距。
通常情况下，我们会将根元素的 font-size 设置为屏幕宽度的一个百分比值，以实现根据屏幕大小调整元素大小的效果。通过 JavaScript 可以动态地根据屏幕宽度设置根元素的 font-size。
function setFontSize() {
var root = document.documentElement;
var screenWidth = root.clientWidth;
root.style.fontSize = screenWidth * 0.01 + 'px';
}
window.addEventListener('resize', setFontSize);
在 CSS 中使用 rem 单位时，可以根据根元素的实际大小，设置其他元素的大小和间距。
html {
font-size: 16px; /* 假设根元素的初始大小为 16px */
}
.child {
font-size: 1.5rem; /* 相当于 24px */
width: 10rem; /* 相当于 160px */
margin-bottom: 2rem; /* 相当于 32px */
}
通过使用 rem 单位，我们可以实现不同设备上的自适应布局，提升用户体验。
总结来说，CSS 中的单位可以分为相对单位和绝对单位两种类型。相对单位（如 em、rem）可以根据其他元素或者视口大小来计算，而绝对单位（如 px、cm、in）的值是固定的。通过在移动设备上使用 rem 单位，并动态设置根元素的 font-size，我们可以实现自适应布局，适应不同屏幕大小的设备。
本文来自极简博客，作者：夜色温柔，转载请注明原文链接：CSS中的相对单位和绝对单位，以及rem自适应布局
