标签导航：

rem自适应布局：设计稿宽度1920px，如何正确计算html的font-size及元素大小？

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自适应布局，让页面在各种设备上都能呈现最佳效果。