rem加雪碧图的使用

205 阅读1分钟

在移动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*/
}