`rem` 是一个相对长度单位，它表示相对于根元素 `` 的字体大小。使用 `rem` 可以实现响应式设计，让页面元素的大小随着根元素字体大小的变化而变化。以下是 `rem` 的基本用法：
设置根元素字体大小
html {font-size: 20px； /* 设置根元素字体大小，1rem = 20px */}
使用 `rem` 设置其他元素的大小
.button {width: 6rem； /* 6rem = 6 * 20px = 120px */height: 3rem； /* 3rem = 3 * 20px = 60px */font-size: 1.2rem； /* 1.2rem = 1.2 * 20px = 24px */}
使用媒体查询适配不同屏幕尺寸
@media screen and （max-width: 600px） {html {font-size: 16px； /* 在小屏幕上设置较小的根元素字体大小 */}}
使用 JavaScript 动态设置根元素字体大小
window.onload = function（） {var fontSize = window.screen.availWidth / 20； // 假设设计稿宽度为720px，分为40份document.querySelector（'html'）.style.fontSize = fontSize + 'px'；}window.onresize = function（） {var fontSize = window.screen.availWidth / 20；document.querySelector（'html'）.style.fontSize = fontSize + 'px'；}
转换 `px` 到 `rem`
.example {width: 100px；width: 100 / 20 + 'rem'； /* 100px / 20 = 5rem */}
请注意，`rem` 是相对于根元素 `` 的字体大小，所以只需要设置根元素的 `font-size`，其他元素使用 `rem` 单位设置成相应的百分比即可。