如何搞定移动端REM适配？妙招尽在这里！

1. REM适配的必要性

在移动互联网时代，随着智能手机和平板电脑的普及，越来越多的人开始使用移动设备来访问互联网。为了给用户提供更好的浏览体验，移动端适配已成为网站建设的必备要求。

而REM适配是一种非常流行的移动端适配方式。它的原理是通过在CSS中使用rem单位来定义元素的尺寸，而不是直接使用px单位。这样，当设备的分辨率发生变化时，元素的尺寸也会相应地调整，从而实现移动端界面的统一显示。

2. 如何实现REM适配

2.1 获取设备的dpr值

dpr是device pixel ratio的缩写，意为设备像素比。它是设备物理像素和CSS像素的比例。

获取设备的dpr值有两种方法：

• 通过JavaScript获取：

const dpr = window.devicePixelRatio;

• 通过CSS获取：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* 设备dpr为1.5时的样式 */
}

2.2 计算根字体大小

在REM适配中，根字体大小是一个非常重要的概念。它是指html元素的font-size属性的值。根字体大小决定了其他元素的字体大小和尺寸。

根字体大小的计算公式为：

根字体大小 = 设备的dpr值 * 设计稿的根字体大小

例如，如果设备的dpr值为2，设计稿的根字体大小为16px，那么根字体大小应该设置为32px。

2.3 在CSS中使用REM单位

在计算出根字体大小之后，就可以在CSS中使用REM单位来定义元素的尺寸了。

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.5rem;
}

这样，当设备的分辨率发生变化时，元素的尺寸也会相应地调整，从而实现移动端界面的统一显示。

3. REM适配的注意事项

在使用REM适配时，需要注意以下几点：

• 在html元素上设置font-size属性值时，不能使用px单位，必须使用rem单位。
• 在其他元素上设置font-size属性值时，可以使用rem单位，也可以使用px单位。但是，如果使用px单位，那么元素的尺寸不会随着设备的分辨率变化而调整。
• 在CSS中定义元素的尺寸时，尽量使用rem单位。这样，可以保证元素的尺寸随着设备的分辨率变化而调整。

4. 总结

REM适配是一种非常流行的移动端适配方式。它简单易用，并且兼容性好。通过在CSS中使用rem单位来定义元素的尺寸，可以实现移动端界面的统一显示。

希望本文能帮助您快速掌握REM适配的技巧，并将其应用到您的实际项目中。