Rem（即Root font-size of the root element in percentage）是一种相对单位，它可以根据根元素的字体大小进行缩放，非常适用于移动端开发。在移动设备上，屏幕大小和分辨率各不相同，因此使用像素作为单位可能导致在不同设备上显示效果不一致。而使用Rem单位可以根据设备的屏幕大小和分辨率进行适配，从而在不同设备上展现出相似的显示效果。
Rem的工作原理
Rem单位是相对于根元素（即HTML元素）的字体大小来计算的。通常情况下，根元素的默认字体大小是16px。通过将根元素的字体大小设置为相对单位（如Rem），其他元素的尺寸和间距可以根据根元素的字体大小进行缩放。
设置Rem的方式
在移动端开发中，我们通常使用CSS预处理器（如Sass、Less等）来编写样式，并通过构建工具（如Webpack、Grunt、Gulp等）自动将Rem单位转换为像素单位。下面是一个使用Sass编写样式并自动转换Rem单位的示例：
$rem-base-font-size: 16px;
@function px2rem($px) {
@return ($px / $rem-base-font-size) * 1rem;
}
body {
font-size: $rem-base-font-size;
}
.container {
width: px2rem(300px);
margin: px2rem(20px) auto;
}
h1 {
font-size: px2rem(24px);
}
在上面的示例中，我们创建了一个名为px2rem的Sass函数，用于将像素单位转换为Rem单位。通过设置$rem-base-font-size变量为16px，我们可以根据需要调整根元素的字体大小。在编写样式时，我们可以按照像素单位编写，并使用px2rem函数将其转换为Rem单位。
使用Viewport Meta标签
在使用Rem进行移动端开发时，还需要正确设置Viewport Meta标签，以确保页面的显示效果符合预期。Viewport Meta标签可以设置页面的初始缩放比例、宽度和触摸缩放的设置。下面是一个常用的Viewport Meta标签设置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
通过设置width=device-width，页面的宽度将与设备的宽度保持一致。设置initial-scale=1可以确保页面在初始加载时以正常比例显示。通过设置maximum-scale=1, user-scalable=no，可以防止页面被用户缩放。
兼容性考虑
尽管Rem在移动端开发中具有良好的适配性，但在一些旧版移动浏览器中可能存在兼容性问题。为了解决这些问题，可以考虑使用Polyfill来提供对Rem单位的支持。
Polyfill是一段JavaScript代码，可以在不支持某项新特性的浏览器中进行补充。对于支持关键CSS3属性的浏览器，可以直接使用Rem单位，并利用Polyfill来支持不支持的浏览器。一些常用的Rem Polyfill工具有REM.js、REM-unit-polyfill等。
小结
使用Rem进行移动端开发可以实现屏幕适配，使页面在不同设备上展示出相似的显示效果。通过设置根元素的字体大小为Rem单位，并结合Viewport Meta标签的正确设置，可以轻松地进行移动端开发。同时，需要兼容一些旧版浏览器时，可以考虑使用Rem Polyfill来解决兼容性问题。
本文来自极简博客，作者：时光旅者，转载请注明原文链接：使用Rem进行移动端开发
