CSS 响应式设计是建立在不同设备分辨率的基础上的，设计师需要考虑到不同设备的屏幕大小、分辨率、像素密度等因素，以使网站在不同设备上都能呈现出最佳的效果。而 rem 单位可以帮助我们实现响应式设计的适配。
rem 单位介绍
rem 是相对于根元素 html 的字体大小而言的。比如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。rem 的好处在于它可以根据根元素的字体大小来自动适应不同的屏幕大小。
使用 rem 实现响应式设计适配
在实际使用中，我们可以将根元素的字体大小设置为屏幕宽度的百分比，以实现响应式设计的适配。具体实现如下：
html {
font-size: calc(100vw / 7.5);
}上面的代码中，我们将根元素的字体大小设置为屏幕宽度的 1/7.5，也就是说，当屏幕宽度为 750px 时，根元素的字体大小为 100px，这样我们就可以使用 rem 单位进行布局和样式的设置了。
举个例子，如果我们想将一个 div 元素的宽度设置为屏幕宽度的一半，我们可以这样写：
div {
width: 50%;
}如果我们想将它的高度设置为屏幕宽度的 1/3，我们可以这样写：
div {
height: calc(100vw / 3);
}rem 的优势和劣势
使用 rem 单位实现响应式设计适配有以下优势和劣势：
优势
- rem 单位可以根据根元素的字体大小来自动适应不同的屏幕大小，实现响应式设计的适配。
- rem 单位相对于 px 单位更加灵活，可以方便地进行缩放和调整。
劣势
- rem 单位的计算比较麻烦，需要根据根元素的字体大小来计算。
- rem 单位的兼容性不如 px 单位，一些老版本的浏览器可能不支持 rem 单位。
总结
CSS 响应式设计是现代网页设计的必备技能之一，而使用 rem 单位可以帮助我们实现响应式设计的适配。虽然 rem 单位有一些缺点，但是在实际使用中，它的优势远大于劣势。因此，我们在进行响应式设计时，可以优先考虑使用 rem 单位来实现适配。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658b9ebdeb4cecbf2d0db15a