我相信很多开始写移动端页面的同学们都用流式布局，弹性布局flex解决自适应的问题，今天本人介绍一下在实践中用的最简单的布局方案——rem布局 

rem（即html的字体大小），如果html字体大小100PX，那么1rem = 100px。

---

本示例设置宽度375px，是以iPhone6为例，如果页面的宽度超过了640px，页面中html的font-size恒为120px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640) ，移动端屏幕宽document.documentElement.clientWidth

话不多说，直接上代码☺

---

为了好计算，所以设置100px

#html1 {

font-size:100px;

}

---

相信有一点基础的人都能看懂，我相信大家！

function recalc() {

 var h = document.getElementById('html1');

  // w代表实际宽度,获取当前屏幕可视区域大小

  var w = document.documentElement.clientWidth;

  console.log(w);

  // d代表设计宽度

  var d = 375;

  // 来动态设置html根标签的字体大小

if (w>= 640) { 

      h.style.fontSize = '120px';

    } else {

  h.style.fontSize = w / d * 100 + 'px';

}

  console.log(h.style.fontSize);

}

window.addEventListener("resize", recalc, false);

document.addEventListener('DOMContentLoaded', recalc, false);

效果图

---

---

内容就这么多，希望能帮到大家！如果有更好的方法或者我哪里写的不对欢迎指正。 

---