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代表實際寬度,獲取當前屏幕可視區(qū)域大小

  var w = document.documentElement.clientWidth;

  console.log(w);

  // d代表設計寬度

  var d = 375;

  // 來動態(tài)設置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

內(nèi)容就這么多，希望能幫到大家！如果有更好的方法或者我哪里寫的不對歡迎指正。

原文作者：匆匆那年_海，博客主頁：http://www.itdecent.cn/u/910c0667c515
95后前端漢子，愛編程、優(yōu)秀、聰明、理性、沉穩(wěn)、智慧的程序猿一枚。