动态计算rem

最新推荐文章于 2023-02-25 16:46:41 发布

豆奶dudu

最新推荐文章于 2023-02-25 16:46:41 发布

阅读量517

点赞数

分类专栏： web 文章标签： rem

本文链接：https://blog.csdn.net/qq_36457584/article/details/80973615

版权

web 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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';

})