使用相对长度单位rem布局网页内容
【摘要】 前言：上篇我们提到了相对单位em的用法，知道了em的概念，即是一个相对的单位，也知道了em的值不是固定的，p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢？那就得看一下父级元素的值了，本级元素的px值随着父级元素的变化而变化的，“进制”是浏览器的默认值（16px）;和em对应的还有个相对单位，就是我们今天重点要说的rem;011rem等于多少px?我们先来看一段代...
前言：上篇我们提到了相对单位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” 的字体大小是多少？
编辑
结果是16px，为什么？因为浏览器的默认字体大小是16px，此时的1rem就是16px了。
接下来，我们将div的的字体大小设置为1.5rem；再来看看 “段落1” 的字体大小是多少呢？
编辑
结果是24px，看到这个结果，大家是不是就很开心了呢？因为我们知道这个结果怎么算的，那就是16px*1.5rem的结果。
接下来我们再将div2的字体大小调整一下，为1.5rem,有的伙伴就安奈不住了，老师，这个我知道，这个的值是36px.按照em的思路算，24px*1.5rem,结果就是36px。那我们来看看结果：
编辑
为什么还是24px呢？怎么不是36px?问题就出在rem这个单位上，至此，我们就可以总结一下rem的特性：
- rem的值不是固定的
- rem的值与父级元素无关，与根级元素有关（本案例中即html的值）
- “进制”也是浏览器的默认值（本案例中默认是16px）
这就是相对长度单位rem的用法，是不是很庆幸自己又学会了一个知识点呢？
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）