如何使用rem实现网页自适应布局？

6 min read

rem是一种相对单位，相对于根元素的字体大小来计算。因此，通过设置根元素的字体大小，可以实现整个页面的自适应布局。

具体实现方式如下：

  1. 设置根元素html的字体大小，一般设置成屏幕宽度除以一个固定的值，例如：html { font-size: 62.5%; }，表示1rem等于10px。
  2. 以固定的字号（例如：16px）为基准，根据设计图中元素的尺寸比例，计算出元素的尺寸，以rem作为单位。
  3. 在不同屏幕尺寸下，根元素的字体大小会自适应调整，而元素的尺寸也会按照相同的比例进行缩放，从而实现自适应布局。

例如，如果设计图中一个元素的宽度为160px，高度为80px，字号为16px，此时我们可以按照如下的方式计算出元素的尺寸：

.element {
  width: 16rem; /* 160px / 10px = 16rem */
  height: 8rem; /* 80px / 10px = 8rem */
  font-size: 1rem; /* 16px / 16px = 1rem */
}

这样，在不同屏幕尺寸下，元素的尺寸会按照相同的比例自适应调整，从而实现自适应布局。