在移动端开发中，为了适应不同设备的屏幕尺寸和分辨率，我们通常会使用rem（root em）来进行适配。rem是相对于根元素（即html元素）的字体大小的单位。通过动态调整根元素字体大小，可以实现页面元素的自适应。
rem适配的原理如下：
1. 设置根元素的字体大小为一个相对较大的值，通常为10px或者12px。
2. 使用rem单位来定义页面元素的尺寸，例如：width: 1rem;。
3. 当页面加载时，根据设备的屏幕宽度动态计算根元素的字体大小，并将其应用到页面上。
具体实现步骤如下：
步骤一：设置根元素的字体大小
在CSS文件中，设置根元素的字体大小为一个相对较大的值，例如：
```css
html {
font-size: 10px;
}
```
这里将字体大小设置为10px，也可以根据需求调整。
步骤二：使用rem单位定义页面元素尺寸
在CSS文件中，使用rem单位来定义页面元素的尺寸，例如：
```css
.container {
width: 10rem;
height: 5rem;
font-size: 1.4rem;
}
```
这里的.container类中，width、height和font-size都使用了rem单位。
步骤三：动态计算根元素的字体大小
在JavaScript中，根据设备的屏幕宽度动态计算根元素的字体大小，并将其应用到页面上，例如：
```javascript
function setRem() {
var screenWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
var fontSize = screenWidth / 10;
document.documentElement.style.fontSize = fontSize + 'px';
}
window.addEventListener('resize', setRem);
setRem();
```
这里的setRem函数会在页面加载和窗口大小改变时触发。它首先获取设备的屏幕宽度，然后将其除以10，得到根元素的字体大小，最后将其应用到页面上。
通过以上步骤，我们就实现了rem适配。页面上的元素尺寸将会根据设备的屏幕宽度进行动态调整，从而实现了页面的自适应。
需要注意的是，使用rem适配时，我们通常会将设计稿按照某个标准屏幕尺寸（例如375px）进行设计，然后根据实际设备的屏幕宽度进行动态计算。这样可以保证页面在不同设备上的显示效果基本一致。
总结一下，rem适配是移动端开发中常用的一种适配方案，通过动态调整根元素的字体大小，实现页面元素的自适应。通过设置根元素的字体大小和使用rem单位来定义页面元素的尺寸，再结合动态计算根元素字体大小的JavaScript代码，我们可以轻松实现页面的适配。希望本文能对你理解和应用rem适配有所帮助。
