随着移动互联网普及，越来越多的用户使用各种不同的设备浏览网页。为满足不同设备的屏幕大小和分辨率的需求，响应式设计应运而生，它可以让同一个站点能够在不同的设备上自适应地展现不同的布局和样式。而在响应式设计中，REM 单位的使用是一种比较流行的方式，本文将会介绍 REM 单位在响应式设计中的应用，以及如何使用 REM 单位来实现响应式设计，并给出相关的示例代码。
REM 单位是什么？
REM 是 CSS3 中新增的相对单位，相对于根元素的字体大小进行计算。这里所说的根元素，指的是 HTML 文档的根元素，也就是 html 标签。默认情况下，根元素的字体大小为 16px，因此 1rem 就等于 16px。
相比于其他常见的单位（如 px, em 等），REM 更加具有可扩展性，可以根据根元素的字体大小进行缩放，便于实现响应式设计，在移动端和 PC 端之间切换时也更加方便。
怎样使用 REM 实现响应式设计？
1. 设置根元素的字体大小
我们首先需要在 CSS 中设置根元素的字体大小，以便后续的 REM 计算可以参考到这个值。一般来说，我们会把根元素的字体大小设置为一个相对较小的值，比如 50px 或 62.5%，这样方便以后的计算。
-- ---------- ---- --
---- -
---------- -----
-
-- ----------------- ---------------- --
---- -
---------- -------
-2. 使用 REM 单位进行布局
有了根元素的字体大小，我们就可以用 REM 单位来进行布局了。布局时，我们可以根据需求将一个屏幕分为若干等份，然后把每一份的宽度用 REM 单位来表示，这样便于进行计算和自适应。
-- ----- - -------- --- --
-----
------ ------
-
-- ----------------- --
-----
------ ------
-
------ ------ --- ----------- -------
-----
------ ------
-
-3. 使用 REM 单位进行字体大小控制
在响应式设计中，字体大小的设置也是至关重要的。同样的，我们可以使用 REM 单位来进行字体大小的自适应。一般来说，我们会设置一些基准值，在不同屏幕下按比例进行调整。
-- --------- ---- --
---- -
---------- -----
-
-- ------- --
------ ----------- ------ -
---- -
---------- -----
-
-REM 实现响应式设计示例代码
基于 REM 实现响应式设计的代码如下所示：
--------- -----
------
------
----- ----------------
---------- ---------------
-------
-- --------------- ---- --
-----
---------- -----
-
-- -- ------- ------- -- ----- --- --
------ -
------ -----
------- -----
----------------- -----
-------------- -------
-
------- -
------ ----
------ -----
------- -----
----------------- --------
------------- -----
-
----- -
------ ----
------- -----
----------------- --------
-
-- -------- --
------ ------ --- ----------- -------
-----
---------- ------
-
--------
------ -----
------ -----
------------- --
-
------
------ -----
----------- -------
-
-
--------
-------
------
-----------------
-------------------
---------------
-------
-------
这段代码中，我们设置根元素的字体大小为屏幕宽度的 1/10，然后使用 REM 单位来对宽度进行计算，并通过媒体查询监听屏幕宽度变化，以便实现移动端下的自适应布局。
总结
在响应式设计中，使用 REM 单位可以使我们更加方便地进行布局和样式的设计，而且具有很好的跨设备和可扩展性。通过本文的介绍和示例，相信大家对 REM 单位的使用有了更深入的了解，希望能够在日后的项目开发中加以应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647337f9968c7c53b00b693c