了解 REM 适配：提升你的移动端开发体验

2023-11-21 14:10:20

一、REM 适配原理

REM 适配的原理在于，它利用媒体查询或 JavaScript 动态检测设备的宽度，并根据不同的宽度为根元素设置对应的字体大小。这样，当设备宽度发生变化时，根元素的字体大小也会随之变化，从而影响到整个页面的布局和元素尺寸，从而实现自适应布局。

二、REM 适配实现方法

1. 使用媒体查询

可以使用媒体查询来实现 REM 适配。媒体查询是一种 CSS 技术，它允许你根据设备的屏幕宽度、高度、方向等条件来设置不同的样式。

/* 当设备宽度为 320px 时，根元素的字体大小为 10px */
@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
}

/* 当设备宽度为 768px 时，根元素的字体大小为 16px */
@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* 当设备宽度为 1024px 时，根元素的字体大小为 18px */
@media screen and (max-width: 1024px) {
  html {
    font-size: 18px;
  }
}

2. 使用 JavaScript

也可以使用 JavaScript 来实现 REM 适配。JavaScript 是一种脚本语言，它可以动态改变网页的内容和样式。

// 获取根元素
var html = document.documentElement;

// 获取设备的宽度
var width = window.innerWidth;

// 根据设备的宽度设置根元素的字体大小
if (width < 320) {
  html.style.fontSize = '10px';
} else if (width < 768) {
  html.style.fontSize = '16px';
} else if (width < 1024) {
  html.style.fontSize = '18px';
}