在移动设备的使用越来越广泛的今天，响应式设计（Responsive Design）成为了前端开发领域的一项重要技术。而 rem 单位作为一个相对单位，可以帮助我们更好地实现响应式设计，下面将详细讲解如何利用 rem 单位布局实现响应式设计。
什么是 rem 单位？
rem 单位是相对于根元素的字体大小而定的，即对于任何元素来说，1rem 等于根元素的字体大小。例如，如果根元素设置的字体大小为 16px，那么一个元素使用 2rem 作为其宽度，则相当于使用 32px。
利用 rem 实现响应式设计的步骤
利用 rem 单位实现响应式设计的步骤如下：
1.设置根元素的字体大小
以常用的设计稿宽度，750px 作为例子，首先我们需要设置根元素的字体大小为屏幕宽度的 1/75，代码如下：
html {
font-size: calc(100vw / 7.5);
}这里使用了 CSS 中的 calc 函数，100vw 表示屏幕宽度，/ 7.5 表示将屏幕宽度除以 7.5 得到根元素的字体大小。
2.按照设计稿尺寸设置元素大小
根据设计稿的尺寸，设置元素的大小，同时使用 rem 单位来设置宽高，例如，设计稿中一个按钮的尺寸为 120px * 60px，那么相应的 CSS 代码如下：
.btn {
width: 1.6rem;
height: 0.8rem;
}这里使用了 1.6rem 来表示按钮的宽度，0.8rem 来表示按钮的高度。
3.使用媒体查询实现响应式设计
当屏幕宽度发生变化时，我们需要根据不同的屏幕尺寸来调整元素的大小。这时候，我们可以使用媒体查询（Media Query）来实现响应式设计。
例如，当屏幕宽度小于 576px 时，我们需要将按钮的宽度设置为 100%，代码如下：
@media (max-width: 575px) {
.btn {
width: 100%;
}
}4.使用 viewport 实现移动设备适配
除了使用 rem 单位之外，我们还需要为移动设备做适配。在移动设备中，我们可以使用 viewport 来设置页面的宽度和缩放比例。
在 HTML 头部添加如下代码即可：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
示例代码
下面是一个使用 rem 单位布局实现的响应式设计示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- ---------------- ---------------- ---------------- ------------------
----------------- ------ ---- -----------
-------
---- -
---------- ---------- - -----
-
---- -
------- --
-------- --
---------- --------
-
---------- -
-------- -----
------------ -------
---------------- -------
------- ------
-
---- -
------ -----
------- -----
----------------- --------
------ -----
----------- -------
------------ -----
---------- -------
-
------ ----------- ------ -
---- -
------ -----
-
-
--------
-------
------
---- ------------------
---- ----------------- ------------
------
-------
-------总结
利用 rem 单位实现响应式设计是一项非常实用的技术，通过设置根元素的字体大小，按照设计稿尺寸设置元素大小，使用媒体查询实现响应式设计，以及使用 viewport 实现移动设备适配，我们可以轻松地实现响应式设计。如果你想快速掌握这项技术，可以通过阅读本文的示例代码来加深理解并且进行实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1520148841e9894d98231