移动端布局之动态rem的实现

移动端布局是现在Web前端开发的重要一环，其中动态rem是解决移动端适配的好方法之一。下面是基本的实现步骤：

1. 设置页面的viewport

首先在HTML文档的head标签中设置viewport，这样才能正确显示在移动设备上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中width=device-width表示宽度设为设备的宽度（单位为CSS像素），initial-scale=1表示页面的初始缩放比例为1。

2. 设置root font-size

通常默认的font-size是16px，但是我们需要动态计算，为此我们可以用JavaScript根据设备宽度来计算并设置root font-size。例如：假设设计稿宽度为750px，代码如下：

var rootEl = document.documentElement;
var designWidth = 750;
function setRemUnit() {
  var screenWidth = rootEl.clientWidth;
  var rem = screenWidth / designWidth * 100;
  rootEl.style.fontSize = rem + 'px';
}
setRemUnit(); // 初始化
window.addEventListener('resize', setRemUnit); // 监听窗口变化，重新计算rem

上面代码中，我们通过dividing screen width by design width可以得到rem的大小。我们每次监听到window的resize事件时都会重新调用setRemUnit()函数以确保rem的size总是正确的。

3. 使用动态rem布局

有了上述的设置，我们现在就可以使用rem对于移动设备布局了。例如，我们需要一个50px的宽度的按钮，就可以这样定义样式：

.button {
  width: 0.5rem;
  height: 0.5rem;
  font-size: 0.14rem;
  line-height: 0.5rem;
  border-radius: 0.1rem;
}

如果设备的宽度为320px（屏幕分辨率），那么在该屏幕下，0.5rem将会被计算为：

var screenWidth = 320;
var designWidth = 750;
var rem = screenWidth / designWidth * 100;
// 此时rem=42.67px，所以.button的宽度和高度将会是21.34px，即0.5rem乘以42.67px/100 ≈ 21.34px

示例1

设计稿宽度为640px，html部分代码为：

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

js部分代码如下

var roothtml = document.getElementsByTagName("html")[0];
var deviceWidth = roothtml.getBoundingClientRect().width; // 获取设备宽度
window.onresize = function(){
  deviceWidth = roothtml.getBoundingClientRect().width;
  if(deviceWidth > 640){
    deviceWidth = 640;
  }
  if (deviceWidth < 320) {
    deviceWidth = 320;
  }
  roothtml.style.fontSize = deviceWidth / 6.4 + 'px'; //6.4是640/100，即设计图画布的宽度分100份
}

示例2

设计稿宽度为750px，html部分代码为：

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

js部分代码如下

var roothtml = document.getElementsByTagName("html")[0];
var deviceWidth = roothtml.getBoundingClientRect().width;
window.onresize = function(){
  deviceWidth = roothtml.getBoundingClientRect().width;
  if(deviceWidth > 750){
    deviceWidth = 750;
  }
  if (deviceWidth < 320) {
    deviceWidth = 320;
  }
  roothtml.style.fontSize = deviceWidth / 7.5 + 'px'; //7.5是750/100，即设计图画布的宽度分100份
}

以上两个示例都是以设计稿的宽度为基础，计算每个屏幕需要缩放的比例，然后适配各个屏幕大小。这样在移动端设备中，就可以使用rem单位进行布局了。