rem的理解与应用

rem的理解与应用

前端的小伙伴有没有遇到一个问题，设计师给你的设计稿上面宽高都是固定的多少px，你根据设计稿高度还原了元素的宽高，结果产品经理却跟你说，不同设备下元素看起来大小不一样？有经验的前端人员就知道，这个时候该是rem登场了。
很多文章会告诉你，rem就是相对于根元素html的字体大小，我这里便不再累赘，我们直接看实际例子。

问题

如上图，有一个设计稿标注了全稿宽高为375和667px，其中一个div宽高为300和50px，如何做rem适配？

解决

分三步走：
1、获取屏幕大小 screenWidth
2、屏幕大小除以N，将屏幕均分为N份。即 N份 rem 占满整个屏幕。（为方便计算，暂且设N为10）
3、根元素的字体大小设为 screenWidth/rem，即设为一份rem的大小

实际代码如下：

    var html = document.querySelector('html');
    function setRem() {
        var screenWidth = window.innerWidth; //获取屏幕宽
        var rem1 = screenWidth / 10; //屏幕的宽度/设计稿占满全屏幕所需的rem数量，就可以得到1rem为多少像素。
        html.style.fontSize = rem1 + 'px';
    };
    setRem();
    window.onresize = function() {
        setRem();
    }

以上js代码，将屏幕平均分成10份（自定义，方便计算为主）也就是10rem占满整个屏幕。
如题 设计稿全宽为375px，div宽度为300px，那么此div的宽度应该为多少rem呢？
代入公式：元素宽度/设计稿全宽 = X/10，即 300px/375px = X/10,得出X = 8rem。
（375px=10rem，那么300px=8rem）

小伙伴你会了吗？欢迎评论交流！