CSS之em、px、rem的区别

前端

作为一个前端开发工程师，关于这些长度单位还是得了解一下。虽然在日常的开发中px、%用的多些，也会用到vh、vw，其他的虽然用的少但也得了解，说不定就能解决你样式中的问题呢。

计量单位

在css中计量单位分相对长度单位和绝对长度单位

• 相对长度单位：em、ex、ch、rem、vw、vh、vmin、vmax、%
• 绝对长度单位：cm、mm、in、px、pt、pt、pc

今天就具体介绍一下其中的em、rem、px。其他的感兴趣的可以自己去了解。

em、px、rem

em、px、和 rem 都是用于指定元素大小的单位，它们在 CSS 中有不同的用途和特性。

1. px（像素）：

   • px 是最基本的长度单位，表示相对于显示器屏幕分辨率的一个点。1 像素等于屏幕上的一个点。
   • px 是绝对单位，不受父元素的影响。当使用 px 时，元素的大小将始终相对于屏幕分辨率。

   div {
     width: 100px;
     height: 50px;
     font-size: 16px;
   }
   

2. em：

   • em 是相对单位，它是相对于元素的字体大小来计算的。如果没有设置字体大小，则相对于父元素的字体大小。
   • 例如，如果父元素的字体大小为 16px，设置子元素的 font-size: 2em，则子元素的字体大小为 2 * 16px = 32px。

   body {
     font-size: 16px;
   }
   
   div {
     font-size: 2em; /* 相对于父元素字体大小，即 32px */
   }
   

3. rem（根元素的相对单位）：

   • rem 与 em 类似，但是相对的是根元素的字体大小。rem 是相对于文档的根元素（html 元素）的字体大小。
   • 这使得 rem 更易于控制整个页面的大小。

   html {
     font-size: 16px; /* 设置根元素字体大小 */
   }
   
   div {
     font-size: 2rem; /* 相对于根元素字体大小，即 32px */
   }
   

什么时候用哪个单位呢

选择使用哪个单位（px、em、rem）通常取决于的设计和开发需求。以下是一些建议：

1. 使用 px：

   • 当希望元素的大小在不受父元素字体大小影响的情况下保持固定。
   • 对于一些固定大小的元素，如边框、间距等，通常使用 px 更为合适。

   div {
     width: 100px;
     padding: 10px;
     border: 1px solid #000;
   }
   

2. 使用 em：

   • 当希望元素的大小相对于其父元素的字体大小进行缩放。
   • 对于一些相对尺寸（如文本大小）和相对布局的情况，em 可以提供更灵活的解决方案。

   body {
     font-size: 16px;
   }
   
   div {
     font-size: 1.5em; /* 相对于父元素字体大小，即 24px */
     margin-bottom: 1em; /* 相对于父元素字体大小，即 16px */
   }
   

3. 使用 rem：

   • 当希望元素的大小相对于根元素的字体大小进行缩放，这样可以更容易控制整个页面的大小。
   • rem 通常用于设置全局的基础字体大小，然后其他元素使用 em 进行相对尺寸设置。

   html {
     font-size: 16px; /* 设置根元素字体大小 */
   }
   
   div {
     font-size: 2rem; /* 相对于根元素字体大小，即 32px */
     margin-bottom: 1rem; /* 相对于根元素字体大小，即 16px */
   }
   

选择合适的单位也要考虑到响应式设计的需求。相对单位（em、rem）通常更适用于响应式设计，因为它们可以根据上下文动态地适应变化的环境，而绝对单位（px）在这方面相对较死板。

小结：

• px 是绝对单位，不受父元素影响。
• em 是相对于元素字体大小的单位，或者相对于父元素字体大小的单位。
• rem 是相对于根元素字体大小的单位，因此更容易控制整个页面的大小。