Rem自适应布局详解：轻松解决新手困惑
许多前端新手在学习Rem自适应布局时常常感到迷茫，尤其是在不同屏幕尺寸下如何调整页面元素大小。本文将通过一个实际案例，详细讲解Rem自适应的正确实现方法，帮助您快速掌握这项技术。
问题： 假设设计稿宽度为1920像素，如何让页面在各种屏幕尺寸下都能完美适配？一种常见的方案是动态调整html的font-size，计算公式为：font-size = document.width / 10。如果设计稿中有一个100x100像素的盒子，CSS中宽度和高度该如何设置呢？这种方法是否正确？
错误的方案分析： 直接使用document.width / 10计算font-size并不准确，因为它忽略了设计稿的基准宽度。
立即学习“前端免费学习笔记（深入）”；
正确的Rem自适应实现： 正确的做法是将设计稿宽度（1920像素）作为基准。我们可以通过以下CSS代码设置html元素的font-size：
html {
font-size: calc(100vw / 19.2);
}
其中，“19.2”是设计稿宽度1920除以100的结果。100vw代表视口宽度的100%。calc(100vw / 19.2)计算的结果是：每个CSS像素占视口宽度的1/19.2。 当视口宽度为1920像素时，html的font-size为100px。
对于设计稿中100x100像素的盒子，CSS代码如下：
.box {
width: 10rem;
height: 10rem;
}
因为10rem在1920像素宽度的屏幕上等于100像素 (10 * 10px)。 这种方法确保了不同屏幕尺寸下，页面元素大小比例保持一致，从而实现了Rem自适应布局，让页面在各种设备上都能呈现最佳效果。
