在现代 Web 开发中，响应式设计已成为了必不可少的技术之一。而在实现响应式设计时，如何适配多终端成为了一个重要的挑战。本文将介绍如何使用 rem 单位来实现响应式设计中的多终端适配。
什么是 rem 单位
rem 是相对于根元素（也就是 html 元素）的字体大小单位。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。
与 px 不同，rem 的大小是相对于根元素的字体大小而言的。这意味着，如果你改变了根元素的字体大小，那么整个页面中使用 rem 单位的元素的大小也会相应地改变。
如何使用 rem 单位实现响应式设计
使用 rem 单位实现响应式设计的关键在于正确地计算 rem 的大小。一般来说，我们会定义一个基准字体大小，然后使用相对于基准字体大小的 rem 单位来设置元素的大小。
设置基准字体大小
在使用 rem 单位之前，我们需要先设置根元素的字体大小。一般来说，我们会将根元素的字体大小设置为屏幕宽度的一定比例。例如，我们可以将根元素的字体大小设置为屏幕宽度的 1/10：
html {
font-size: calc(100vw / 10);
}这样，当屏幕宽度为 320px 时，根元素的字体大小就会被设置为 32px。
使用 rem 单位设置元素大小
在设置元素的大小时，我们可以使用相对于基准字体大小的 rem 单位。例如，如果我们希望一个元素的宽度为屏幕宽度的一半，那么我们可以将它的宽度设置为 5rem（假设基准字体大小为 10px）：
.box {
width: 5rem;
}这样，当屏幕宽度为 320px 时，元素的宽度就会被设置为 160px。
使用媒体查询实现多终端适配
虽然使用 rem 单位可以实现相对于根元素的字体大小的自适应，但是我们还需要使用媒体查询来实现对不同终端的适配。
例如，我们可以使用媒体查询来设置不同屏幕宽度下的基准字体大小：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- ---------- - ----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- ---------- - ----
-
-
------ ------ --- ----------- ------- -
---- -
---------- ---------- - ----
-
-这样，当屏幕宽度小于等于 640px 时，根元素的字体大小会被设置为屏幕宽度的 1/20；当屏幕宽度大于 640px 且小于等于 1024px 时，根元素的字体大小会被设置为屏幕宽度的 1/40；当屏幕宽度大于 1024px 时，根元素的字体大小会被设置为屏幕宽度的 1/80。
示例代码
下面是一个使用 rem 单位实现响应式设计的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
---- -
---------- ---------- - ----
-
------ ------ --- ----------- ------ -
---- -
---------- ---------- - ----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- ---------- - ----
-
-
------ ------ --- ----------- ------- -
---- -
---------- ---------- - ----
-
-
---- -
------ -----
------- -----
----------------- ----
-
--------
-------
------
---- ------------------
-------
-------在这个示例代码中，根元素的字体大小会根据屏幕宽度自适应地改变。同时，使用 rem 单位设置的元素大小也会随着根元素的字体大小的改变而自适应地改变。在不同屏幕宽度下，元素的大小也会相应地改变。
总结
使用 rem 单位可以很方便地实现响应式设计中的多终端适配。通过设置基准字体大小和使用媒体查询，我们可以让页面在不同终端上都能够呈现出最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65054e7c95b1f8cacd1cf361