自动设置 rem es模块写法

export default function () {
  let html = document.documentElement;
  function onWindowResize() {
    if (html.getBoundingClientRect().width < 750) {
      html.style.fontSize = html.getBoundingClientRect().width / 10 + "px";
    } else {
      html.style.fontSize = 75 + "px";
    }
  }
  onWindowResize();
  window.addEventListener("resize", onWindowResize);
}

引入

import rem from '所在目录/rem'

rem(); //执行

vue文件中使用

<style lang="scss">
  @function px2rem($px) {
    $rem: 75px;
    @return ($px/$rem) + rem;
  }
  .box{
    width:px2rem(100px);
  }
</style>

 

posted @ 2017-08-28 11:41  吕岳阳  阅读(293)  评论(0编辑  收藏  举报