介绍
在响应式设计中，一个重要的问题是如何处理不同屏幕尺寸和分辨率的设备。当我们面对各种设备，如智能手机、平板电脑、笔记本电脑和桌面电脑时，我们需要确保网站或应用程序在任何屏幕大小和设备上都看起来美观、舒适且可用。而 REM 即是实现这个目标的一种方法。
REM 全称为 Root EM，它的工作机制类似于 EM （即相对于父元素的字体大小），但是 REM 相对于根元素的字体大小（即 <html> 元素）。这使我们可以使用 REM 为整个应用程序或站点定义相对于根元素的单位，而不是相对于不同的父元素。
在本文中，我们将讨论如何在响应式设计中使用 REM 来自适应不同的屏幕尺寸。
REM 的使用
要使用 REM，我们需要定义一个根字体大小作为基准值。在大多数情况下，我们使用的是 16px 作为基准值，因为这是浏览器默认的字体大小。接下来，我们可以使用 REM 作为相对于基准值的单位。
例如，如果定义一个元素的字体大小为 2REM，则它的字体大小将是 2 倍的基准值，也就是 32px（16px * 2）。假设我们设定根字体大小为 16px，那么在不同的设备上，这个基准值将会有不同的取值。
REM 的优点
使用 REM 有以下几个优点：
适应不同设备: 因为 REM 是相对于根元素的字体大小，所以无论设备的屏幕大小和分辨率如何变化，REM 的大小都会自适应调整。
可使用媒体查询: REM 可以配合媒体查询使用。在设计响应式页面时，我们可以通过使用不同的媒体查询和 REM 的组合，来根据不同屏幕大小和分辨率应用不同的样式。
提高可读性: 由于 REM 是更为直观、易于理解的单位，使用 REM 可以提高代码的可读性。
REM 的应用示例
下面是一些使用 REM 实现响应式设计的示例：
-- -------------------- ---- -------
-- --- --
---- -
---------- -----
-
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------ -
---- -
---------- -----
-
-
-- -
---------- -----
-
- -
---------- -----
-在这个示例中，我们首先定义了一个根字体大小为 16px，然后定义了三个媒体查询，分别适应了小屏幕、中等屏幕和大屏幕。
在每个媒体查询中，我们将根字体大小增加了一些像素，以适应更大的屏幕。在最后，我们使用 REM 作为字体大小的单位，并为 h1 元素设置了 2 倍大小的字体大小，为 p 元素设置了标准大小的字体大小。这样即使在不同设备上，h1 元素的大小也会相对于 p 元素大出两倍。
总结
在响应式设计中，使用 REM 是一种简单、灵活且直观的方案，可以帮助我们适应不同的屏幕大小和分辨率。通过正确使用 REM 和媒体查询，我们可以创建出美观、舒适且可用的应用程序和网站，并面对各种设备，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed468968c7c53b0d36e46