自适应布局通过百分比和rem单位协同实现弹性与一致性：百分比用于容器的流式伸缩，如设置.width: 75%实现响应式分栏；rem基于根字体（如html设为16px）提供统一尺寸基准，确保组件在不同上下文中保持比例，适合控制间距、侧边栏等；二者结合可在可变容器内维持稳定设计，如.main-content用70%宽度配合1rem内边距；配合媒体查询调整小屏下根字体（如14px）及设置max-width限制大屏拉伸，兼顾紧凑性与可读性，形成高效响应式方案。
在现代网页开发中，自适应布局是确保页面在不同设备上良好显示的关键。通过结合使用百分比和rem单位，可以实现既灵活又可维护的宽度控制方案。
百分比布局：基于父容器的弹性伸缩
百分比单位（%）让元素宽度相对于其父容器动态调整，是实现流式布局的基础。
例如，设置一个内容区域始终占据父容器的75%：
.container {
width: 80%;
margin: 0 auto;
}
<p>.column {
width: 75%;
float: left;
}</p>这样无论屏幕大小如何变化，.column 都会按比例伸缩，适合构建栅格系统或分栏布局。
立即学习“前端免费学习笔记（深入）”；
rem单位：基于根字体的统一基准
rem 是相对于根元素（html）字体大小的单位，默认通常为16px。它提供了一种可预测的尺寸控制方式，并支持用户缩放偏好。
先定义根字体大小：
html {
font-size: 16px;
}
<p>.sidebar {
width: 15rem; /<em> 相当于 15 × 16px = 240px </em>/
}</p>使用 rem 可以保证组件在不同上下文中保持一致的视觉比例，尤其适合固定侧边栏、按钮或间距控制。
百分比与rem结合：灵活中的稳定
将两者结合，可以在整体弹性布局中保留部分固定节奏的模块。比如主内容区用百分比，嵌套元素用rem控制内部间距：
.main-content {
width: 70%;
padding: 1rem;
box-sizing: border-box;
}
<p>.card {
margin-bottom: 1.5rem;
padding: 1rem;
}</p>这种模式下，容器随屏幕变化而伸缩，内部结构仍保持基于 rem 的统一设计语言，避免因缩放导致排版错乱。
响应式优化建议
为了进一步提升体验，可配合媒体查询调整根字体或断点：
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
小屏下缩小 rem 基准，使整体布局更紧凑。同时，对关键容器设置 max-width 防止过度拉伸：
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
这样既保留了流动性，又避免了在大屏上文字行过长影响阅读。
基本上就这些。百分比负责宏观布局的伸缩性，rem 确保微观元素的一致性与可维护性，二者协同工作，能有效支撑大多数响应式场景。不复杂但容易忽略的是合理设置根字体和最大宽度，这对最终视觉效果影响很大。
