雪碧圖rem設(shè)置
假設(shè).icon-sprite 為背景圖 在這個(gè)上面需要設(shè)置background-size:10rem 20rem(這兩個(gè)單位是背景圖的寬和高)
小圖標(biāo)：.icon-email .icon-phone 的寬和高(還有background-position也用rem表示就行)就可以按照正常rem那樣去寫(xiě)就行position
問(wèn)題：
有些情況下會(huì)有圖片多那么一個(gè)像素或者少一個(gè)像素晒屎，所以在拼合雪碧圖的時(shí)候弊琴，圖片之前就需要有一定的空隙，不能挨著
雪碧圖百分百設(shè)置
當(dāng)background-position為百分比的時(shí)候，將以圖片的中心點(diǎn)為基準(zhǔn)計(jì)算其相對(duì)位置友浸，而使用px像素值時(shí)將以圖片的左上角(0 0)為基準(zhǔn)，如果是10% 20%這個(gè)值甘畅，那么就是以圖片的10% 20%的坐標(biāo)點(diǎn)搂橙，放置在容器的10% 20%的位置。這就是說(shuō)明态兴，如果是用百分比來(lái)做background-position的屬性值的話狠持，那么背景圖片相對(duì)于容器的中心點(diǎn)事隨時(shí)都在改變的。
定位百分比值（n m） 元素的寬高（w h） sprite圖的寬高（k g） 需要顯示icon的坐標(biāo)(x y)
n = -x/(w-k)100%
m= -y/(h-g)100%
Paste_Image.png
s.gif
為了方便 可以寫(xiě)一個(gè)mixin
@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){ background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%); }
后面使用的時(shí)候就可以寬高按rem來(lái)寫(xiě) background-position 按照百分比來(lái)寫(xiě)
