rem布局方案 - Githubissues

什么是rem？

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

rem布局的本质是等比缩放!

如果让html元素的字体大小恒等于屏幕宽度的1/100，那么1rem就等价于屏幕宽度的1%，因此rem可以实现可伸缩布局。

rem只适用于固定尺寸元素，但又希望该元素在不同设备上可以等比缩放。

文本不建议使用rem，因为其字体大小和字体宽度并不成线性关系；另外，用户使用更大的屏幕，更多时候是想看到更多的内容，而不是更大的字，所以文本不推荐使用rem。

rem布局方案：

计算屏幕宽度width（不超过视觉稿宽度）。
屏幕宽度等分为 n 份（考虑浏览器最小字体）。
html上设置fontSize = width / n。
屏幕宽度变化时，重复以上步骤。
即1rem = width / n。
body上设置宽度为 n rem（防止页面过宽）。
body上修正字体（可以使用@media设置响应式字体大小）。
字体使用em。
rem计算公式：视觉稿元素宽度 / 视觉稿总宽度 * n。
postcss插件自动计算rem。

一般情况下，n 是一个经验值，可以有不同的方法，例如10、15、16、100等都可以，但是需要考虑到浏览器的最小字体限制。

一般可以从视觉稿角度出发来计算 n ：

n = 视觉稿宽度 / 100

注：等分为100份，主要是为了以后能更方便地兼容vw/vh。

例如：

750px视觉稿，n = 750 / 100 = 7.5 640px视觉稿，n = 640 / 100 = 6.4

假设我们现在拿到了一个宽度为750px的视觉稿，那么 n = 750 / 100 = 3.75，代入上述rem计算公式，则视觉稿上200px的元素等于200 / 750 * 7.5 = 2rem。

但上面计算出来的是视觉稿上的像素，如果要转换到css像素，还需要考虑dpr。

一般情况下，我们会以750px的视觉稿为准进行布局，n还要再除以dpr，n = n / dpr = n / 2 = 3.75。

最终，视觉稿上200px的元素就转换为css像素等于200 / 750 * 3.75 = 1rem。

JS基本代码如下：

        (function() {
            function rem() {
                let width = document.documentElement.clientWidth;
                let fontSize = width / 3.75;
                document.documentElement.style.fontSize = fontSize + 'px';
            }
            window.onresize = rem;
            rem();
        })();

参考文章

https://www.cnblogs.com/lyzg/p/4877277.html

hushicai / hushicai.github.io

rem布局方案 #6

参考文章