项目中使用rem的可用方案

最新推荐文章于 2025-04-25 08:55:51 发布

原创最新推荐文章于 2025-04-25 08:55:51 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rem

随手笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种基于REM单位的响应式布局方法，适用于IE9及以上浏览器。通过JavaScript动态设置根元素字体大小，实现不同屏幕尺寸下的一致布局效果。文章提供了具体的实现代码，并说明了如何将PSD设计稿转换为实际的网页布局。

兼容性

ie9+

javascript:

<pre>
<code>
//重置font-size
var _w = document.documentElement.offsetWidth;
var htmlDOM = document.getElementsByTagName('html')[0];
if (_w >= 640) {
    _w = 640;
}
htmlDOM.style.fontSize = 100 / 750 * _w + "px";
window.addEventListener('resize', function() {
    var _w = document.documentElement.offsetWidth;

    if (_w >= 640) {
        _w = 640;
    }
    htmlDOM.style.fontSize = 100 / 750 * _w + "px";
});
</code>
</pre>

解释：

该方案把屏幕划分为1/10=1rem计算；
UI提供的psd设计稿需要调整为：宽=320px；
然后再进行测量取值；
使用：测量值/320px/10/1rem=使用的rem

例子：

<pre>
<code>
    //less
    @divide:10;
    @pswWidth:320;
    @ppr:320px/@divide/1rem;
    li{
        // width:测量值/@ppr;
        width:200px/@ppr;
      }
</code>
</pre>