什么是 REM 单位？
REM 是一种相对单位，相对于根元素的字体大小进行计算。比如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。
使用 REM 单位的好处是可以根据根元素的字体大小来自适应调整页面元素大小，从而实现响应式设计。
如何设置根元素的字体大小？
在 HTML 的头部添加以下代码，即可设置根元素的字体大小：
<style>
html {
font-size: 16px;
}
</style>上面代码中，html 表示根元素，font-size 表示字体大小。
如何在 CSS 中使用 REM 单位？
在 CSS 中，可以使用 REM 单位来设置元素的大小、边框、内边距、外边距等。例如：
.box {
width: 10rem;
height: 5rem;
border: 1rem solid black;
padding: 2rem;
margin: 1rem;
}上面代码中，width、height、border、padding、margin 都使用了 REM 单位。
如何在媒体查询中使用 REM 单位？
在响应式设计中，需要根据屏幕大小来调整元素大小。可以使用媒体查询来实现。例如：
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}上面代码中，当屏幕宽度小于等于 768px 时，根元素的字体大小将变为 14px。
如何使用 REM 单位进行缩放？
在移动端设备上，用户可以通过手势缩放来调整页面元素大小。为了让页面元素跟随用户的缩放而自适应调整大小，可以使用 JavaScript 来监听缩放事件，并动态修改根元素的字体大小。例如：
window.addEventListener('resize', function() {
var screenWidth = document.documentElement.clientWidth;
var fontSize = screenWidth / 10;
document.documentElement.style.fontSize = fontSize + 'px';
});上面代码中，当屏幕大小发生变化时，会重新计算根元素的字体大小，并设置为屏幕宽度的 1/10。
总结
使用 REM 单位可以方便地实现响应式设计，根据根元素的字体大小来自适应调整页面元素大小。在实际应用中，需要注意设置根元素的字体大小、在 CSS 中使用 REM 单位、在媒体查询中使用 REM 单位、使用 JavaScript 进行缩放等方面的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d2eb46add4f0e0ffb3091f