標籤:公式 nsa 大致 方法 避免 mixin img 寬度 osi
移動端適配一般我會使用rem進行適配,大致操作就是按照一定尺寸設計稿進行製作,最後將所有px值轉換為rem,但是一些手機背景精靈圖(cssSprite)就會出現一些誤差(1px左右),如果公司要求不高倒也無所謂,但是我不能忍啊。
方法就是利用background-position百分比值替換rem值 要想得到定位的百分比值(n m),我們需要 元素的寬高(w h), sprite圖的寬高(k g),我們需要顯示icon的座標(x y),公式如下:
1 n = -x / (w-k) * 100% 2 m = -y / (h-g) * 100%
利用SCSS方法處理後:
//$spriteWidth 雪碧圖的寬度px//$spriteHeight 雪碧圖的高度px//$iconWidth 需要顯示icon的寬度px//$iconHeight 需要顯示icon的高度px//$iconX icon的原始x座標//$iconY icon的原始y座標//@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){ background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%);}.icon2{ width: 0.74rem; height: 0.64rem; @include bgPosition(1072, 442, 74, 64, 188, 5);}//進一步擴充//@mixin bgPositionSameSprite($iconWidth, $iconHeight, $iconX, $iconY){ //將$spriteWidth和$spriteHeight放入方法,這樣使用時就只需要4個參數,也避免了後期修改精靈圖尺寸到處搜尋替換 $spriteWidth : 1072; $spriteHeight : 442; @include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY); } .icon3{ width: 0.74rem; height: 0.64rem; @include bgPositionSameSprite(74, 64, 188, 5);}
移動端適配之sprite雪碧圖背景定位