根据设计稿的尺寸,比如设计稿的宽的是750*1134 px,在实际写代码的设计稿中的按钮大小,间距都是要除以2的。
如果想1rem对象设计稿中的100px,那么代码如下
;(function(win) {
var doc = win.document
var docEl = doc.documentElement
var tid
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width > 540) {
width = 540
}
var rem = width / 7.5
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)
这个时候比如设计稿中的导航栏高度为88px。1rem=100px 也就是0.88rem。实际页面中是44px。