网站首页编程语言正文

px和em和rem的区别

作者：叶子yes 更新时间： 2022-07-22 编程语言

px

px是像素单位，是相对屏幕宽高度而言，一旦设定就无法随浏览器尺寸的改变而改变。

示例：设置padding为30px，宽高100px

<style>
    div{
      padding: 30px;
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
</style>

<body>
  <div>我是一个div</div>
</body>

在这里插入图片描述

em

em是相对长度单位，相对当前元素的字体大小而言。

示例：我们给div设置padding为1em

<style>
    div{
      padding: 1em;
      border: 1px solid black;
    }
</style>

<body>
  <div>我是一个div</div>
</body>

在这里插入图片描述
可以看出默认 1em = 16px （因为默认字体大小为16px）

我们设置font-size为28px，再来看一下：

div{
      font-size: 28px;
      padding: 1em;
      border: 1px solid black;
    }

在这里插入图片描述
可以看出padding变成了28px，所以em设置的值不是固定的，会随当前元素的字体大小的变化而变化。

rem

rem也是一个相对长度单位，相对的是html元素的字体大小而言的。

示例：给div设置padding为1rem

<style>
    div{
      padding: 1rem;
      border: 1px solid black;
    }
</style>

在这里插入图片描述
这里1rem也是默认16px。

接下来，我们设置html的字体大小为20px：

html{
      font-size: 20px;
    }
div{
    padding: 1rem;
    border: 1px solid black;
   }

在这里插入图片描述
可以看出padding变成了20px

我们可以再给div标签的文本设置文字大小为28px：

html{
      font-size: 20px;
    }
div{
    padding: 1rem;
    border: 1px solid black;
    font-size: 28px;
   }

在这里插入图片描述
可以看出，padding仍然是20px，所以rem相对的是html元素的字体大小而言的。

原文链接：https://blog.csdn.net/lq313131/article/details/125919714

网站首页 编程语言 正文

px和em和rem的区别

px

em

rem

相关推荐

网站首页编程语言正文