使用rem进行自适应页面布局

设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏

设备	分辨率（物理尺寸）	屏幕宽高	PPI	状态栏高度	导航栏高度	标签栏高度
iPhone6	750×1334 px	375×667px	326PPI	40px	88px	98px

)实际大小给出的标注，我们如何在尽可能多的屏幕上 1:1 的还原设计稿呢？

如今使用比较多的方式就是rem，（rem是尺寸的单位，相对根节点的字体大小的一个单位）。

比如设计稿中一个标注宽 30px（iphone6），我们实际写样式时应该为15px（两倍屏会将我们的15px放大为实际的30px，换句话说：把30个像素填充到了15px的宽度里）。

这样我们对照这iphone6上的设计稿写出的样式在iphone6手机上的表现与设计稿是保持一致的，那么我们怎样让样式在其他手机屏幕上也能保持这个比例去适应呢？

我们只需要去改变在相应手机屏幕上的根结点的font-size即可，这样页面中的其他不布局仍然会保持与设计稿中的比例显示。

在实际中，为了方便换算单位，习惯把在iphone6中的根结点font-size大小设置为100px，

可参考我们服务号中设置根结点大小的方式，如下：

const winW = (document.documentElement.clientWidth || document.body.clientWidth) / 3.75;
document.documentElement.style.fontSize = `${winW}px`;
// 当页面大小发生改变,重新修正rem为新窗口尺寸的3.75分之一
window.onresize = function resize() {
  let wid = document.documentElement.clientWidth || document.body.clientWidth;
  if (wid > 1024) {
    wid = 1024;
  } else if (wid < 320) {
    wid = 320;
  }
  wid /= 3.75;
  document.documentElement.style.fontSize = `${wid}px`;