基于rem的移动端响应式适配方案(详解)

响应式设计是指设计师根据设备的尺寸和屏幕大小来自动调整网页设计的过程。移动端的响应式设计尤为重要，因为手机、平板和电脑等设备的尺寸和分辨率差别较大。基于rem的移动端响应式适配方案就可以帮助开发者解决这个问题。

什么是rem？

rem是指相对于根元素(html)字体大小的大小单位。即rem是一个缩写, 表示“font-size: root em”。

rem 的值计算方式：元素尺寸/根元素字体大小

下面将介绍基于rem的移动端响应式适配方案的具体步骤。

步骤一：设置meta标签

在网页头部的head标签中添加以下代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

其中，width=device-width 表示网页的宽度等于设备的宽度，initial-scale=1.0 表示页面最初的缩放比例为 1，maximum-scale=1.0 表示页面最大的缩放比例为 1，user-scalable=0 表示页面不允许用户缩放。

步骤二：设置根元素字体大小

接下来需要通过 JS 计算出根元素字体的大小。以 iPhone6 为例，它的视口宽度为 375 px：

var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
var fontSize = 100 * screenWidth / 375;
document.documentElement.style.fontSize = fontSize + 'px';

上面的代码将根元素的字体大小设置为屏幕宽度的 1/3.75，即 100px = 1rem。这样，当屏幕宽度为 375px 时，根元素的字体大小就设置为 100px，其他元素的大小就可以用 rem 作为单位来设置了。

步骤三：设置元素大小

其他元素的大小可以用 rem 作为单位来设置。例如一个按钮样式的 CSS：

.btn {
  width: 3rem;
  height: 1.5rem;
  font-size: 0.6rem;
  line-height: 1.5rem;
  border-radius: 0.2rem;
  background-color: #ff9800;
  color: #fff;
  text-align: center;
}

在 iPhone6 的屏幕上，按钮的宽度就是 3rem * 100px/rem = 300px。在其它设备上，根据屏幕宽度与根元素字体大小的比例计算大小。

示例如下：

假设根据设计需求要在使用在手机上的页面中插入两张图片，图片宽度分别为 300px 和 600px，如何在不同大小的屏幕上同时保持它们呈现出相同的效果？

我们可以应用上述步骤，按照比例计算出图片的宽度值，并通过 rem 单位在 CSS 中进行设置。如下：

.img {
  width: 6rem;
}

.img-1 {
  width: 3rem;
}

以上代码中，第一张图片的宽度比例为 6:1，第二张图片的宽度比例为 3:1。在根元素字体大小为 100px 的情况下，在不同设备尺寸下，图片的宽度也会自动等比例缩放。

总结

基于rem的移动端响应式适配方案是一种简单易学、实用灵活的前端开发技术。使用该技术可以在不同的手机、平板等移动设备上实现一致的视觉效果和用户体验。

事实上，本文所涉及的知识仅仅是响应式设计的入门部分，如果想要了解更深入的响应式设计技术，可以阅读更多的资料进行学习。