[分享]css中em与rem的区别

在CSS中，尺寸单位是非常重要的，这决定了我们设计的页面在不同设备上的表现。em和rem是两种常用的CSS长度单位，但它们之间有一些重要的区别。首先，em单位是相对于当前元素的字体大小来计算的。在父元...

在CSS中，尺寸单位是非常重要的，这决定了我们设计的页面在不同设备上的表现。em和rem是两种常用的CSS长度单位，但它们之间有一些重要的区别。

首先，em单位是相对于当前元素的字体大小来计算的。在父元素的字体大小不变的情况下，子元素的em值会继承其父元素的字体大小。例如：

  p {
            font-size: 16px;
        }
        span {
            font-size: 0.8em; /* 相当于12.8px */
        } 

在这个例子中，span元素的字体大小将被设置为16px的80%，即12.8px。

rem单位也是相对于根元素的字体大小计算的，但它的参照点是HTML元素的字体大小，而不是使用这个单位的元素的字体大小。这意味着rem可以保证在整个页面中保持一致的相对大小。例如：

  html {
            font-size: 16px;
        }
        p {
            font-size: 1rem; /* 相当于16px */
        }
        span {
            font-size: 0.8rem; /* 相当于12.8px */
        } 

在这个例子中，span元素的字体大小将被设置为1rem的80%，即12.8px。这里的关键是HTML元素的字体大小始终为16px，所以rem单位在页面中具有一致的相对大小。

总的来说，em和rem单位在设计网页时都会有用处。如果您需要一个相对大小，就使用em。如果您需要一个相对于整个页面而言的固定大小，rem将是更好的选择。