[分享]css中em和rem单位

CSS中的em单位和rem单位是相对长度单位，它们可以用来设置文本和盒子的尺寸。它们的区别在于em单位是相对于父元素的字体大小，而rem单位是相对于根元素的字体大小。 p { fontsize: 16...

CSS中的em单位和rem单位是相对长度单位，它们可以用来设置文本和盒子的尺寸。它们的区别在于em单位是相对于父元素的字体大小，而rem单位是相对于根元素的字体大小。

p {
font-size: 16px; /* 设置p标签的字体大小为16像素 */
}

/* 使用em单位设置字体大小 */
h1 {
font-size: 2em; /* 设置字体大小为父元素字体大小的两倍 */
}

/* 使用rem单位设置字体大小 */
h2 {
font-size: 1.5rem; /* 设置字体大小为根元素字体大小的1.5倍 */
} 

使用em单位的好处是在修改父元素的字体大小时，子元素的字体大小也会跟着改变。但是，使用rem单位的好处是在修改根元素的字体大小时，页面上所有元素的字体大小都会跟着改变，这样可以更方便地调整页面的整体风格。

需要注意的是，在一些旧版本的浏览器中，rem单位可能会出现兼容性问题。如果需要兼容旧版本浏览器，可以选择使用em单位。