在PC端设计时，我们通常会使用固定宽度的布局，但是随着移动设备的普及，我们需要考虑网页在不同设备上的显示效果。为了解决这个问题，我们可以使用rem单位进行适配。

rem是相对于根元素(html)字体大小的单位。通过设置根元素的字体大小，我们可以控制页面中rem单位的大小。

1. 设置根元素字体大小

在CSS中，可以使用@font-face和@viewport两个关键字来设置根元素的字体大小。

@font-face {
font-size: calc(100vw / 3.75); // 设置根元素字体大小，屏幕宽度/设计稿宽度
}

@viewport {
width: device-width; // 重新声明viewport的宽度和缩放比例，避免系统做自适应缩放
zoom: 1;
}

2. 使用rem单位

设置好根元素的字体大小后，我们就可以使用rem单位来进行布局了。

例如，设计稿宽度为750px，在CSS中，我们可以将网页分成10等份，也就是750/10=75px一份。然后设置根元素的字体大小为10px。那么每一份的大小，就可以用7.5rem来表示了。例如，我们需要将某个盒子宽度设置为设计稿中的450px，那么就可以用60rem来表示。

.box {
width: 60rem; // 450px / 7.5
}

3. 使用媒体查询

在使用rem进行布局时，由于不同设备的分辨率和屏幕尺寸不同，我们需要对不同设备进行适配。可以使用媒体查询来为不同设备设置不同的字体大小。

@media screen and (min-width: 320px) {
html {
font-size: 8px;
}
}

@media screen and (min-width: 640px) {
html {
font-size: 16px;
}
}

@media screen and (min-width: 960px) {
html {
font-size: 24px;
}
}

通过这种方式，我们可以针对不同设备设置不同的字体大小，从而实现网页的适配。