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

我会带着你远行 2022-12-25 02:52 112阅读 0赞

![format_png][]

![format_png 1][]

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

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”**的字体大小是多少？

![format_png 2][]

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

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

![format_png 3][]

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

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

![format_png 4][]

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

1.  rem的值不是固定的
2.  rem的值与父级元素无关，与根级元素有关（本案例中即html的值）
3.  “进制”也是浏览器的默认值（本案例中默认是16px）

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

![format_png 5][]

**往期精彩**

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

[2020-11-02][em]

[![format_png 6][] ][em]

[binarySearch与IndexOf的那些事儿~][binarySearch_IndexOf]

[2020-11-01][binarySearch_IndexOf]

[![format_png 7][] ][binarySearch_IndexOf]

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

[2020-10-31][Link 1]

[![format_png 8][] ][Link 1]

[自从有了这款辣椒酱，拌饭再也不用老干妈][Link 2]

[2020-10-30][Link 2]

[![format_png 9][] ][Link 2]

[如何使用bootstrap实现轮播图？][bootstrap]

[2020-10-29][bootstrap]

[![format_png 10][] ][bootstrap]

![format_png 11][]

![format_png 12][]

点分享

![format_png 13][]

点点赞

![format_png 14][]

点在看

[format_png]: /images/20221120/dc870dc37c034224a4912540a54dcd14.png
[format_png 1]: /images/20221120/989fc23c5b14418bb1482756919cabcc.png
[format_png 2]: /images/20221120/886dd43114b8488498729fe938865bdd.png
[format_png 3]: /images/20221120/7919c7982db94219be090ae022d8e146.png
[format_png 4]: /images/20221120/bd4e8b26d815408b91150c2e2eeb3f46.png
[format_png 5]: /images/20221120/c677c10e4efb4432b84c9b38b786f4e7.png
[em]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef0fa0f86619ccc5da9a14ea622899449a407ca3554e932e3f295735180f2346e2a19c46&idx=1&mid=2247497198&scene=21&sn=501918702c0d8e17602f6162990c01a6#wechat_redirect
[format_png 6]: /images/20221120/e028e015c8c74d5eaf22489d2c9f5131.png
[binarySearch_IndexOf]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef2da0f8663b796ed49537e087039e66ad2e49d1179bd32a2fe9b97b2218874281a54e7a&idx=1&mid=2247497164&scene=21&sn=ea481730efb5c9b9d112968edf6adf23#wechat_redirect
[format_png 7]: /images/20221120/ee4b0d91aabe4191a6d31d0c10180c8f.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef43a0f866559246d6b1a44235025fe3c6658b9ae3ae5ad0c281fcb590e6e7f90c568e50&idx=1&mid=2247497122&scene=21&sn=9e3f76c4bcf2b1613de1e2d478130790#wechat_redirect
[format_png 8]: /images/20221120/cd6ea88ea4f946dfbd3221b134a8c32e.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef7da0f8666b66e75eef8907fb9a9e8e55a0ea9a2fd87cc986259f3c3866c05c77aaab98&idx=1&mid=2247497116&scene=21&sn=c72b9c0f8d08612b1187bf31d42c8e31#wechat_redirect
[format_png 9]: /images/20221120/ad4df474b110403390a63667f1c2a814.png
[bootstrap]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef66a0f86670e227bf586ba840d0472375dc3649e3e344dd5d83909636f30d9bdc3f48e5&idx=1&mid=2247497095&scene=21&sn=00a48378c3447b28c7b22de2c005ef1f#wechat_redirect
[format_png 10]: /images/20221120/20a6d03cd84f450b994e07db0f6ecc08.png
[format_png 11]: /images/20221120/1f86c37e59654070aa096dda0244f80c.png
[format_png 12]: /images/20221120/0ff3f4752aa546a3844756afa707fe46.png
[format_png 13]: /images/20221120/0108af3ef9b64bb1b9e41357d8551f59.png
[format_png 14]: /images/20221120/ea0a5bd079af4d5a8925b22f6ad036b5.png