CSS之em、px、rem的区别

2023-12-21 20:24:28

前端

作为一个前端开发工程师,关于这些长度单位还是得了解一下。虽然在日常的开发中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

empx、和 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(根元素的相对单位):

    • remem 类似,但是相对的是根元素的字体大小。rem 是相对于文档的根元素(html 元素)的字体大小。
    • 这使得 rem 更易于控制整个页面的大小。
    html {
      font-size: 16px; /* 设置根元素字体大小 */
    }
    
    div {
      font-size: 2rem; /* 相对于根元素字体大小,即 32px */
    }
    

什么时候用哪个单位呢

选择使用哪个单位(pxemrem)通常取决于的设计和开发需求。以下是一些建议:

  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 */
    }
    

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

小结:

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

文章来源:https://blog.csdn.net/study_way/article/details/135048439
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。