如何实现CSS全屏自适应布局？

全屏自适应的第一步：视口单位

说实话，vw和vh简直是懒人福音。

1vw等于视口宽度的1%，1vh等于视口高度的1%。

所以你把一个盒子宽度写成50vw，它永远占满屏幕一半。

哈哈，这种“所见即所得”让设计稿直接搬进代码。

不过别忘了移动端地址栏会收起又弹出，vh有时会跑偏。

害，遇到这种情况可以改用vmin或者直接用vw来算高度，不忍卒读。。

.fullscreen {
  width: 100vw;
  height: 100vh;
  background: #333;
}

Rem配合JS：稳如老狗的比例尺

咱就是说rem是“以不变应万变”。

核心思路是让根元素的font-size随屏幕变化。

JS一行代码把html根节点的font-size算出来。

然后页面里所有尺寸都用rem写，等比缩放毫无压力。

function setRootFont {
  var w = document.documentElement.clientWidth;
  document.documentElement.style.fontSize = w / 10 + 'px';
}
window.addEventListener;
setRootFont;

不对不对， 记得这段脚本要放在head最前面否则CSS先渲染会出现闪烁。