最近在学习移动的rem布局,写一个小案例的时候遇到了精灵图适配的问题,特此记录的一下。
这是一张宽度为750px的设计图,我把它的宽度分成15份,每一份的大小作为html的字体大小,相当于1rem=50px,然后用媒体查询适配各种屏幕。
- 当我写到这地方时:
图标是一张宽520px高520px的精灵图:
在750的屏幕下测量图标大小是100x100的,大家都知道精灵图在手机端要进行缩放,我就想当然的把精灵图缩放成260px X 260px 的,然后测量的图标位置
代码如下:
@baseFont:50px;
width: 100rem / @baseFont;
height: 100rem / @baseFont;
background: url(../images/icons.png) no-repeat 0 -30rem/@baseFont;
background-size: 260rem / @baseFont auto;
但是出现的下面的情况:
图标变小了,,当时我不明白为什么会这样,试了好多方法,比如把盒子缩小,精灵图放大等等,都没有得到解决。于是我回过头测量了精灵图上的图标的大小,也是100x100,这才明白不用缩放,只要让盒子,图标位置,精灵图三者随着字体的变化都能比例缩放的就行了,就改成的以下代码:
@baseFont:50px;
width: 100rem / @baseFont;
height: 100rem / @baseFont;
background: url(../images/icons.png) no-repeat 0 -60rem/@baseFont;
background-size: 520rem / @baseFont auto;
问题得到的解决,还是精灵图的缩放没理解到位,只记得怎么缩放,不知道按具体情况具体分析,这个就是图标在精灵题图上大小和屏幕的图标的大小一致,只要考虑按字体等比例缩放就行了,不用缩放精灵图。