rem和vw的区别

文章目录

目录

文章目录

前言

一、rem是什么？

二、rem使用步骤

三、vw是什么？

四、vw使用步骤

总结

---

前言

提示：我们在移动适配的时候，可以使用rem和vh这两种相对单位进行布局，那么这两者有何区别呢？

---

提示：以下是本篇文章正文内容，仅供参考

一、rem是什么？

rem是一个相对单位，是相对于HTML字号（也叫根字号）大小的一个单位

即1rem = 1HTML字号，例如当前HTML字号为16px，那么 1rem = 16px。

二、rem使用步骤

1. 首先需要确定设计稿中的大小（某一块单元）
2. 设计稿针对于哪一种设备，即视口宽度（设备宽度是多大）
3. 确定HTML标签字号大小（为了方便计算，默认取设备宽度的1/10），例如：设备宽度为375px，那么我们可以把HTML字号设置为37.5px
4. 计算：根据设计稿的大小px / 37.5px（设定根字号的大小） =  多少rem

---

三、vw是什么？

vw是viewport width的缩写，即视口宽度。也是一种相对单位，但vw是相对于视口宽度的单位。

1vw = 1/100视口宽度，例如当前设备宽度为375px，那么1vw = 3.75px。

四、vw使用步骤

首先需要确定该单元在设计稿中大小

确定设备宽度是多少，例如设备宽度为375px，那么此时1vw = 3.75px（不需要我们手动设置，但需要知道当前设备对应的宽度是多少）

计算：根据设计稿的大小px / 3.75px = 多少vw

---

总结

这两种布局为了方便使用，常配合less进行使用。

rem布局在使用时，使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。

相对而言vw布局稍微简单一些。

与rem不同的是，rem是根据HTML根字号大小去改变，而一般把HTML根字号设置为视口宽度的1/10。vh和vw是根据视口宽度和高度的1/100。因此1rem = 10vh。