使用相对长度单位rem布局网页内容

使用相对长度单位rem布局网页内容

使用相对长度单位rem布局网页内容

前言:上篇我们提到了相对单位em的用法,知道了em的概念,即是一个相对的单位,也知道了em的值不是固定的,p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢?那就得看一下父级元素的值了,本级元素的px值随着父级元素的变化而变化的,“进制”是浏览器的默认值(16px);和em对应的还有个相对单位,就是我们今天重点要说的rem;

01

1rem等于多少px?

我们先来看一段代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      html{
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div2">
        <p>段落1</p>
      </div>
    </div>
  </body>
</html>

在代码中,我们先设置了html的字体大小为1rem,然后来看看“段落1”的字体大小是多少?

使用相对长度单位rem布局网页内容

结果是16px,为什么?因为浏览器的默认字体大小是16px,此时的1rem就是16px了。

接下来,我们将div的的字体大小设置为1.5rem;再来看看“段落1”的字体大小是多少呢?

使用相对长度单位rem布局网页内容

结果是24px,看到这个结果,大家是不是就很开心了呢?因为我们知道这个结果怎么算的,那就是16px*1.5rem的结果。

接下来我们再将div2的字体大小调整一下,为1.5rem,有的伙伴就安奈不住了,老师,这个我知道,这个的值是36px.按照em的思路算,24px*1.5rem,结果就是36px。那我们来看看结果:

使用相对长度单位rem布局网页内容

为什么还是24px呢?怎么不是36px?问题就出在rem这个单位上,至此,我们就可以总结一下rem的特性:

  1. rem的值不是固定的

  2. rem的值与父级元素无关,与根级元素有关(本案例中即html的值)

  3. “进制”也是浏览器的默认值(本案例中默认是16px)

这就是相对长度单位rem的用法,是不是很庆幸自己又学会了一个知识点呢?

使用相对长度单位rem布局网页内容

往期精彩

使用相对长度单位em布局网页内容

2020-11-02

使用相对长度单位rem布局网页内容

binarySearch与IndexOf的那些事儿~

2020-11-01

使用相对长度单位rem布局网页内容

新机必装!那些你不知道的实用技软件在这里!文末免费获取

2020-10-31

使用相对长度单位rem布局网页内容

自从有了这款辣椒酱,拌饭再也不用老干妈

2020-10-30

使用相对长度单位rem布局网页内容

如何使用bootstrap实现轮播图?

2020-10-29

使用相对长度单位rem布局网页内容

使用相对长度单位rem布局网页内容

使用相对长度单位rem布局网页内容

点分享

使用相对长度单位rem布局网页内容

点点赞

使用相对长度单位rem布局网页内容

点在看

上一篇:rem布局适配


下一篇:CSS中的一些细节