Rem 根节点rem单位冲突解决办法

2025-08-15 10:24:13首发，2周前更新

本文是阐述在一个项目中使用多个前端框架导致根节点rem单位冲突的解决方法。

Rem 根节点rem单位冲突解决办法2周前更新 Responsive自适应6个月前更新

前言

如果页面使用rem单位来定义尺寸，那么必须在页面的根节点（html节点或者称为root节点）定义一个基准单位，也就是在html节点或root节点定义一个基准的font-size属性。

如果页面没有在根节点定义font-size，则默认1rem=16px；如果是这样，则在使用rem单位的时候就应该知道width:2rem相当于width=32px。

rem冲突

但是根节点只允许定义一次font-size属性，也就是说整个页面（或者项目）只允许有一个基准字号，当页面（或者项目）引入了多个以rem单位计量的UI框架，此时就发生了冲突。

因为每个UI框架都有自己的单位体系，所以rem与px的对应关系也可能大不相同，此时必须选择一个UI框架的rem作为主单位，其他UI框架的rem做相应的比例换算。

本框架的rem

在早年浏览器只支持12px以上的尺寸，如果使用rem作为尺寸单位，通常将1rem定义为方便计算的px值。

如果1rem=16px，那么56px的尺寸可以用56/16rem表示。

当前的浏览器已经广泛支持10px甚至更小的单位尺寸，所以本框架将1rem定义为10px，这个方案远优于其他框架的rem等值方案，比如14px的尺寸可用1.4rem表示，29px可用2.9rem表示。

使用1rem=10px等值方案具有方便计算和可预见的良好特性，注定是rem根值方案的最好选择。

冲突解决

如果页面或项目即引入了本框架，又引入了其他UI框架，而且都以rem作为单位，然而却不使用本框架的基准字号，此时需要用户修改本框架根值变量--_num-scale。

该变量默认=1，表示默认基准字号是10px，1rem=10px，没有放大或缩小；当用户自定义根节点的基准字号之后需要重定义该变量。

                
                :root{
                    //增大了字号
                    font-size:24px;
                    //此时需要相应的缩小本框架的rem单位
                    --_num-scale:calc(10/24);
                }

通过一个示例演示，在修改根节点的font-size之后，如何保持本框架的rem计量的元素尺寸不变。

输出
HTML
JS

（font-size:1.4rem;line-height:1.5）中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

                
                let changeBox = document.querySelector('#change'),
                    btn = changeBox.querySelector('button'),
                    root = document.documentElement
                    btn.onclick = ()=>{
                        let value = Math.floor(Math.random() * 13) + 8,
                        string = `${value}px`,
                        alt = `calc(10/${value})`;
                        btn.innerHTML = `1rem=${string}，--_num-scale=${alt}`;
                        root.style.fontSize = string;
                        root.style.setProperty('--_num-scale', alt);
                    }