当前位置：网站首页>px和em和rem的区别

px和em和rem的区别

2022-08-02 14:12:00 【叶子yes】

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

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

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

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

在这里插入图片描述

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也是一个相对长度单位，相对的是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元素的字体大小而言的。

版权声明
本文为[叶子yes]所创，转载请带上原文链接，感谢
https://blog.csdn.net/lq313131/article/details/125919714