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

前言：上篇我们提到了相对单位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”的字体大小是多少？

结果是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的用法，是不是很庆幸自己又学会了一个知识点呢？

往期精彩

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

2020-11-02

binarySearch与IndexOf的那些事儿~

2020-11-01

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

2020-10-31

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

2020-10-30

如何使用bootstrap实现轮播图？

2020-10-29

点分享

点点赞

点在看

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

使用相对长度单位em布局网页内容
顺便问一下哈?那个辣椒酱大家感觉怎么样,你们也买了也尝了,是不是该反馈反馈啦~~如果还有想要的,可以联系我呐! 原文地址:自从有了这款辣椒酱,拌饭再也不用老干妈前言:在页面开发中,页面元素的尺寸大小 ...
em表示什么长度单位_使用相对长度单位em布局网页内容
顺便问一下哈?那个辣椒酱大家感觉怎么样,你们也买了也尝了,是不是该反馈反馈啦~~如果还有想要的,可以联系我呐!原文地址:自从有了这款辣椒酱,拌饭再也不用老干妈前言:在页面开发中,页面元素的尺寸大小和 ...
vue怎么vw布局好用_vue 实现 rem 布局的或者 vw 布局的方法
vue 实现 rem 布局的或者 vw 布局的方法一.实现 rem 布局移动端 name="viewport" content="width=device-widt ...
vue怎么vw布局好用_Vue 实现 rem 布局或vw 布局的方法_晴枙_前端开发者
一.实现 rem 布局移动端 name="viewport" content="width=device-width, initial-scale=1, maximum ...
场景化分析rem布局原理
移动端rem布局前端很流行的布局方式rem布局,通过设备之间px像素与rem的转换,达到不同屏幕相同视觉效果的布局方式,在了解rem布局之前需要先明白几个概念,设备像素(物理像素).独立像素.CSS ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

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

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

最新文章

热门文章