1. 程式人生 > >動態計算rem

動態計算rem

a.scss檔案

@function px2rem($px){

    $rem:37.5px;

    @return ($px / $rem) + rem;

}

.hello {

    width : px2rem(100px);

    height:px2rem(100px);

    &.b{

        width:px2rem(50px);

        height:px2rem(50px);

    }

}



js檔案

//獲取螢幕寬度viewport

let htmlWidth = document.documentElement.clientWidth() || document.body.clientWidth();

//獲取html的dom

let htmlDom = document.getElementsByTagName('html')[0];

//設定html的fontsize

htmlDom.style.fontSize = htmlWidth / 10 + 'px';

window.addEvenListener('resize',(e)==>{

   let htmlWidth = document.documentElement.clientWidth() || document.body.clientWidth();

    htmlDom.style.fontSize = htmlWidth /  10 + 'px';

})