什么是Rem布局
REM（Root EM）布局是一种相对单位，它基于根元素的字体大小来确定其他元素的尺寸。在REM布局中，网页的尺寸会根据根元素的字体大小进行调整。
REM布局的主要思想是将网页的尺寸划分为相对于根元素字体大小的比例。通常情况下，根元素的字体大小被设置为网页的基准字体大小。然后，通过在CSS样式中使用REM单位来设置元素的尺寸，可以根据基准字体大小进行自适应调整。
例如，如果将根元素的字体大小设置为16像素，那么1REM就等于16像素。如果在CSS样式中将某个元素的宽度设置为2REM，则它的宽度将是32像素（2乘以基准字体大小）。
通过使用REM布局，可以实现响应式设计，使网页在不同的屏幕尺寸和设备上具有良好的适应性。通过调整根元素的字体大小，可以统一调整整个网页的尺寸，从而实现相对一致的布局。
需要注意的是，为了兼容性和可维护性，通常会结合使用REM和媒体查询等技术来实现更精确的布局控制。此外，还可以使用Sass、Less等CSS预处理器或使用现有的CSS框架如Bootstrap来简化REM布局的开发过程。
Rem布局的优点
响应式布局：使用REM单位可以实现相对于根元素的字体大小的自适应调整。这意味着，无论用户使用的是桌面电脑、平板还是手机等不同设备，页面的尺寸都可以根据根元素的字体大小进行自动调整，从而实现响应式布局。
简化开发：使用REM布局可以简化开发过程。通过使用REM单位，可以将元素的尺寸设置为相对值，而无需手动计算和调整像素值。这样，可以避免在不同屏幕尺寸下进行繁琐的像素计算和布局调整，提高开发效率。
统一调整：通过调整根元素的字体大小，可以统一调整整个网页的尺寸。这对于需要对整个网站进行尺寸调整的情况非常有用。只需更改根元素的字体大小，所有使用REM单位设置的元素都将自动相应调整其尺寸，无需逐个修改每个元素的样式。
支持可访问性：REM布局可以帮助提高网页的可访问性。通过根据用户的字体大小偏好设置来设置根元素的字体大小，可以确保网页内容对于用户来说可读性良好，并符合用户的可访问性需求。
兼容性较好：相对于其他相对单位（如em），REM单位具有更好的兼容性。REM单位始终相对于根元素的字体大小，而不会受到父元素字体大小的影响。这意味着在使用REM布局时，不太容易出现尺寸计算错误或继承问题，使得布局更加可靠和一致。
需要注意的是，虽然REM布局具有上述优点，但也需要根据具体情况进行合理的使用和调整。合理设置根元素的字体大小、控制REM单位的使用范围、考虑兼容性等因素都是使用REM布局的关键。
Rem布局的不足
兼容性问题：虽然REM布局在大多数现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能存在兼容性问题。特别是在一些较旧的移动设备和浏览器中，对REM单位的支持可能不完整，需要进行兼容性处理。
过度调整的风险：由于REM布局是基于根元素字体大小的相对单位，当根元素的字体大小调整过大时，可能会导致页面元素的尺寸过度调整。这可能会对页面的布局和用户体验产生负面影响。因此，需要谨慎调整根元素字体大小，并进行充分的测试和调整。
不适合所有场景：REM布局适用于大部分情况下，特别是需要相对于根元素字体大小进行调整的布局。然而，在某些特殊情况下，可能需要使用其他布局技术或单位来实现更精确的布局控制。例如，涉及到固定像素值的细节布局或特定尺寸要求的设计可能需要其他方法。
复杂性和计算成本：相对于直接使用像素单位，使用REM单位可能需要更多的计算和调整工作。特别是在需要进行多层嵌套和相对尺寸计算的布局中，可能需要更多的样式计算和调整。这增加了开发和维护的复杂性，并可能导致性能方面的一些影响。
字体大小限制：由于REM布局是基于根元素字体大小的，因此对于某些特定的元素，如图标和边框等，可能无法直接应用REM单位。这些元素可能需要使用其他单位或技术来进行精确控制。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>REM布局示例</title>
<style>
.container {
width: 20rem;
margin: 0 auto;
background-color: #f2f2f2;
padding: 2rem;
}
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
.text {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.btn {
font-size: 1rem;
padding: 0.5rem 1rem;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">REM布局示例</h1>
<p class="text">这是一个使用REM布局的示例。</p>
<button class="btn">点击按钮</button>
</div>
<script>
function adjustFontSize() {
// 获取屏幕宽度
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 设置根元素的字体大小
document.documentElement.style.fontSize = screenWidth / 10 + 'px';
}
// 页面加载时和屏幕宽度变化时调用字体大小调整函数
window.addEventListener('DOMContentLoaded', adjustFontSize);
window.addEventListener('resize', adjustFontSize);
</script>
</body>
</html>