分享一下自己用了很久的 rem 函数方法

分享一下自己一直使用rem布局的函数 很方便 sass语法也很优美

直接上代码 这段js代码放在html文件

<script>
    function placeholderPic() {
        var w = document.documentElement.offsetWidth;
        document.documentElement.style.fontSize = w / 10 + 'px';
    }
    placeholderPic();
    window.onresize = function () {
        placeholderPic();
    }
</script>

我使用的是sass编译很方便

推荐使用koala 编译sass 附上地址 http://koala-app.com/index-zh.html

这段 函数代码放在scss文件里 解释一下75的意思是750的设计稿 如果你是1920的那就是192 分成10等分
ptr 这个函数名你随便取用 不一定是ptr

@function ptr($p) {
  @return $p/75+rem;
}

这样就不用去算rem了 直接上使用方法

   div {
      width: ptr(108);
      height: ptr(30);
      margin-left: ptr(15);
    }

ps:这种代码直接写在css是不可以的 是sass函数语法 跟css基本上一样