项目中使用rem的可用方案(一)

方案一:

js:

<pre>
<code>
`
(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
    docEl.style.fontSize = rem + 'px';
}

win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }
}, false);

refreshRem();

})(window);
`
</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>

注意点:

要考虑环境占用的位置。(如:微信浏览器的头部导航占用的位置)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容