[分享]css中%跟rem的比例

CSS中有两种常用的长度单位：和rem。百分比单位是相对于父元素的大小进行计算的，而rem则是相对于根元素（即html元素）的大小进行计算的。p { fontsize: 16px; / 假设p元素的默...

CSS中有两种常用的长度单位：%和rem。

百分比单位是相对于父元素的大小进行计算的，而rem则是相对于根元素（即html元素）的大小进行计算的。

p {
  font-size: 16px; /* 假设p元素的默认字号为16像素 */
}

.container {
  width: 80%; /* 容器的宽度为父元素的80% */
  font-size: 0.875rem; /* 字号为父元素字号的0.875倍（即14像素） */
} 

在上面的示例中，容器元素的宽度使用了百分比单位，而字号使用了rem单位。这两种单位之间有一个简单的换算关系：

1rem = 网页根元素的字号
100% = 父元素的大小 

因此，如果我们要将一个元素的大小设置为父元素的一半，可以使用50%来实现，也可以使用0.5rem来实现。需要注意的是，如果父元素的字号改变了，使用rem的元素的大小也会随之改变，而使用百分比单位的元素大小则不会受到影响。

.parent {
  font-size: 20px; /* 父元素字号为20像素 */
}

.child {
  width: 50%; /* 宽度为父元素的50% */
  font-size: 0.5rem; /* 字号为父元素字号的0.5倍（即10像素） */
} 

在上面的示例中，父元素的字号为20像素，子元素的宽度为父元素宽度的一半，字号为10像素。如果我们改变父元素的字号为16像素，子元素的字号也会自动变为8像素，但是宽度仍然保持原来的一半。