在移动rem布局中,怎么使用雪碧图,比如有下面雪碧图(93*1850)
rem的计算规则js如下:
let docEl = window.document.documentElement;
function setRootFontSize () {
let w = docEl.getBoundingClientRect().width / 10;
docEl.style.fontSize = (w < 80 ? w : 80) + 'px';
}
这样在iphone6下html的大小为37.5px,比如画个设计稿为90px的正方形
width: 2.4rem; /* 90px / 37.5 */
height: 2.4rem;
使用雪碧图,则用下面的写法
.box {
background-size: 2.48rem 49.3rem; /* 90/37.5 1850/37.5 */
background-position-x: 0;
}
需要定位的.box-X写法
.box-1 {
background-position-y: 0; /* -90 * 0px */
}
.box-2 {
background-position-y: -2.4rem; /* -90 * 1px + 2*/
}