移动端rem布局

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

rem（即html的字体大小），如果html字体大小100PX，那么1rem = 100px。
本示例设置宽度375px，是以iPhone6为例，如果页面的宽度超过了640px，页面中html的font-size恒为120px，否则，页面中html的font-size的大小为：

100 * (移动端屏幕宽document.documentElement.clientWidth / 640) 

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

#html1 {
font-size:100px;
}

js

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);

image.png
image.png

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

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。