vw和rem自适应公式代码

vw

vw：viewport（屏幕）宽度的1%。加粗：屏幕宽度的1%！

这意味着，vw本身就带有自适应属性。所以，如果我们把html的font-size设为1vw，则它的实际像素值是随着屏幕大小改变而改变的。1200px的屏幕，1vw就是12px，375px的屏幕，1vw就是3.75。

// @viewSize 这种方法只能在less和sass中写，css是不支持的
// vw 375的屏幕宽
@viewSize: 3.75vw;
.login {
  width: (24 / @viewSize); //24px除以
  height: (24 / @viewSize); // 24px除以
  margin: 0 (20 / @viewSize); // 20px除以
}

rem

以下是通过js实现自适应，此时是针对750像素设计图1rem=100px，即设计图中字体大小为28像素时，我们要设置为0.28rem。还是很好换算的。如果设计图给的是640px，只需要将结尾处的参数改成640,640即可。

(function(designWidth, maxWidth) {
  var doc = document,
      win = window,
      docEl = doc.documentElement,
      remStyle = document.createElement("style"),
      tid;


  function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      maxWidth = maxWidth || 540;
      width > maxWidth && (width = maxWidth);
      var rem = width * 100 / designWidth;
      remStyle.innerHTML = "html{font-size:" + rem + "px;}"
  }
  if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle)
  } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null
  }
  refreshRem();
  win.addEventListener("resize", function() {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300)
  }, false);
  win.addEventListener("pageshow", function(e) {
      if (e.persisted) {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300)
      }
  }, false);
  if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px"
  } else {
      doc.addEventListener("DOMContentLoaded", function(e) {
          doc.body.style.fontSize = "16px"
      }, false)
  }
})(750, 750);