CSS中的单位re和rem及他们的一些使用场景

最新推荐文章于 2022-08-16 14:18:04 发布

c y y

最新推荐文章于 2022-08-16 14:18:04 发布

阅读量1.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42185100/article/details/107428972

版权

em 和 rem 及他们的使用方法
关于 px
em
rem
总结

em 和 rem 及他们的使用方法

在介绍 em 和 rem 之前，想简单介绍一下 px（这里指的是 CSS 中的 px，请先记住这一点。如果你
已经对 px 有所了解可以直接跳到第二节阅读）。我们知道 px 是一個绝对单位，绝对单位的意义就
好比坐标系中的原点，在确定了（0, 0)位置之后，我们才能得知坐标（x，y）所表示的位
置。同样这里的 1px 的意义就好比是国际单位制 1m 所表示的意义。当我们对别人说这张床的
长度是 1m 时，他们就能大体了解到那张床的长度。在 CSS 中我们用 px 来表示物体的长度。如
浏览器的宽度，高度等。

关于 px

让我们来一起了解一下 CSS 中的 px 和通常我们所说的照片中的像素 px 的一些联系和区别。这
里我们暂时将 CSS 中的 px 称为 cpx，而将照片中的 px 称为 px。

我们知道，不同的设备之间存在分辨率的差别。同样屏幕尺寸大小的高分辨率设备 A 和低
分辨率设备 B 由于分辨率不同，所导致的最直观的感受就是 A 所显示的字体和图片要比 B 所
显示的清晰。如果我们拿放大镜来观察兩個设备（开玩笑⌣），会发现同样区域大小里面 A 的
像素点的个数要比 B 的多。不严谨的计算一下，像素大小（px）＝区域面积 / 像素个数。
发现 A 的像素要比 B 的小。如果我们把 cpx 和 px 等价，结果是如果在 A 和 B 中都设置了
font-size=10px,那么 A 显示的字体会比 B 的小。此时如果我们想让 A 和 B 的字体大小相同，就需
要将 A 的 font-size 设置的大一些。同样，在同一台设备上通过 Ctrl+`+`和 Ctrl+`-`来调整窗
口的收缩，也是在调整设备的分辨率。

px 的一些使用场景：

font-size: 10px;
width: 10px;
border-width: 10px;
border-radius: 10px;

上面提到的内容可以概括为两点：

px 是绝对单位，用做 CSS 中大小或长度的基准。
由于设备间分辨率的不同，px 在不同设备上体现的实际大小会有所差别。

对于 px 我们可以将其同国际制单位 1m 所象征的含义一样对待。而不用太纠结于它的实际大小。

看到这里，大家可能有点累了，稍微休息一下后，我们一起继续后面的内容吧！

em

em 是相对单位。具体涵义让我们先看幾個例子吧！

示例一

CSS

body {
    font-size: 10px;
}

ul {
    font-size: .5em;
}

HTML

<body>
  <p>font-size</p>
  <ul>
    <li>font-size</li>
  </ul>
</body>

这里大家认为 p 和 li 的 font-sise 应该是多大呢？
答案分别为 10px 和 10px * 50% = 5px

示例二

CSS

body {
    font-size: 20px;
}

ul {
    font-size: .8em;
}

HTML

<body>
  <ul>
    <li>one</li>
    <ul>
      <li>two</li>
      <ul>
        <li>three</li>
      </ul>
    </ul>
  </ul>
</body>

他们的字体大小分别是：
one -> 20px * 80%; two -> 20px * 80% * 80%;
three -> 20px * 80% * 80% * 80%;
从上面的例子可以看到子元素的 font-size 如果用 em 来表示，会由其父元素的 font-size 大小
来进行计算。结果是 ul 内的字体越来越小了。

接下来让我们再看一個例子：

示例三

CSS

body {
    width: 500px;
    padding: 10px;
}

p {
    font-size: 20px;
    padding: 2em;
}

HTML

<body>
  <p>width</p>
</body>

本例中 p 的 padding 应该是多少呢？是父元素的 padding（10px）* 2 还是自己的
font-size（20px）* 2?

答案是 20px * 2
看到这里，大家应该注意到了，padding 属性当使用 em 作为单位时，是使用自己的 font-size
值为计算基准的，类似的属性还有 border, border-radius 。

最后再看一個示例：

示例四

CSS

p {
    width: 200px;
    padding: 2em;
}

HTML

<body>
  <p>padding</p>
</body>

在本例中我们没有在 css 里面添加任何关于 font-size 的规则，但请注意一個条件是浏览器的
默认字体大小一般设置为 16px，从而 p 元素从其继承而来的 font-size 是 16px。
在这里 padding 为 16px * 2 = 32px

rem

在示例 2 中我们看到在嵌套中使用 em 的一些缺点，为此我们可以结合使用 rem。rem 的计算基
准是根节点的 font-size 大小。即通常的 html 标签或 :root 里面设置的字体大小。如：
CSS

html {
    font-size: 10px;
}

/* 或者是
:root {
    font-size: 10px;
}
 */
ul {
    font-size: 1.5rem
}

HTML

<body>
  <ul>
    <li>one</li>
    <ul>
      <li>two</li>
    </ul>
  </ul>
</body>

此时 one 和 two 的 font-size 均为 10px * 1.5 = 15px。

总结

让我们一起回顾一下 em 和 rem：

em 和 rem 均为相对单位
当 em 和 rem 作为单位用在 padding，border，border-radius 等属性上时，
em 的计算基准为本元素的 font-size。rem 的计算基准为根元素的 font-size
浏览器的默认字体大小为 16px

最后如果大家想进一步了解 em 和 rem 的知识，推荐阅读 css_In_deepth

c y y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的单位re和rem及他们的一些使用场景

Table of Contentsem 和 rem 及他们的使用方法关于 pxem示例一示例二示例三示例四rem总结em 和 rem 及他们的使用方法在介绍 em 和 rem 之前，想简单介绍一下 px（这里指的是 CSS 中的 px，请先记住这一点。如果你已经对 px 有所了解可以直接跳到第二节阅读）。我们知道 px 是一個绝对单位，绝对单位的意义就好比坐标系中的原点，在确定了（0, 0)位置之后，我们才能得知坐标（x，y）所表示的位置。同样这里的 1px 的意义就
复制链接

扫一扫