答案：viewport设置确保页面按设备宽度显示，rem单位基于根元素字体大小实现弹性布局。通过meta标签定义视口，结合JavaScript动态调整html的font-size，使rem随屏幕尺寸等比缩放，再配合PostCSS自动化转换px为rem，最终实现移动端响应式适配。
在CSS中，viewport（视口）与rem单位结合使用，是实现响应式设计和移动端适屏的关键手段。通过设置合适的视口元标签，并动态调整根元素字体大小，可以让页面在不同设备上保持良好的视觉比例。
viewport 的作用
viewport 控制网页在移动设备上的显示方式。必须在 HTML 中添加以下 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码确保页面宽度等于设备屏幕宽度，初始缩放为1:1，避免默认缩小显示，是响应式布局的基础。
rem 单位的基本原理
rem（root em）是相对于根元素（html）的字体大小的单位。如果 html 的 font-size 是 16px，那么 1rem = 16px。通过动态修改 html 的 font-size，就可以等比缩放整个页面的布局。
立即学习“前端免费学习笔记（深入）”；
例如：
html { font-size: 16px; }div { width: 10rem; } /* 实际宽度为 160px */
结合 viewport 与 rem 实现适配
为了使页面在不同屏幕尺寸下都能合理展示，可以利用 JavaScript 动态计算 html 的 font-size，从而让 rem 值产生响应式效果。
常见做法是：将设计稿宽度（如750px）作为基准，按比例设置根字体大小。
示例代码：
function setRootFontSize() {const designWidth = 750;
const root = document.documentElement;
const width = root.clientWidth;
root.style.fontSize = (width / designWidth) * 100 + 'px';
}
window.addEventListener('resize', setRootFontSize);
setRootFontSize();
这样，当设备宽度为375px时，html 的 font-size 就是 50px，1rem = 50px；在750px屏幕上，1rem = 100px，实现等比缩放。
CSS 预处理器或 PostCSS 的辅助
手动计算 rem 值较繁琐，可借助工具自动化转换。例如使用 PostCSS 插件 postcss-pxtorem，它能将写好的 px 自动转为 rem。
配置示例：
postcss-pxtorem({rootValue: 100,
propList: ['*']
})
你在 CSS 中写 font-size: 28px，会被自动转成 font-size: 0.28rem，前提是你的基准值设为100px（对应750px设计稿）。
基本上就这些。viewport 提供正确的显示基础，rem 提供可伸缩的度量单位，两者配合加上脚本控制，就能实现高质量的移动端适配。关键在于统一设计基准和动态调整根字体大小。不复杂但容易忽略细节。
