手淘的Flexible方案能使用雪碧圖嗎？

01-26

個人認為基於動態修改頁面根節點字體大小，然後採用rem單位布局的這類移動端適配方案（包括手淘的Flexible）是不能使用雪碧圖的，只能用字體圖標或者和base64等其他方案。原因是在移動端頁面中，Flexible對元素進行了縮放，此時為了讓背景圖片適應其容器的大小，（似乎）不得不設置background-size屬性，而由於background-size是針對整張背景圖（而不是圖片中的某一部分），所以雪碧圖就不適用這種場景了。
我的問題是Flexible方案下能用雪碧圖嗎？如果能，how? 如果不能，why？

謝邀。

作為經常使用Flexible，我來回答一下這個問題。

首先，要使用CSS Sprites也是可以的，只是在製作 Sprites圖的時候需要注意一些細節。盡量避免奇數出現。而且使用CSS Sprites與否，只要使用到了背景圖，都需要配合background-size一起使用，這個是避免不了的，哪怕你是單一的背景圖。

在Flexible中使用CSS Sprites 不好的地方，因為其基於html的font-size來計算，很多時候會出現小數，而不同的瀏覽器對於小數位數的處理也不一致，這樣一來造成缺失的現象。這也是我個人不建議在Flexible中使用 CSS Sprites的原因之一。

對於較小的圖標之類，或者圖片，我們現在都一般採用base64.

上述僅供參考，不一定完全正確

其實是可以用的需要把整張雪碧圖設置background-size: sprite_width rem sprite_height rem;這樣雪碧圖也會縮放。然後就是background-positon的問題了，使用background-position：xx% yy%;來定位雪碧圖，在我使用過程中是基本沒有問題的，只是由於rem是動態計算的，當出現小數點的時候，會出現&<=1px的誤差，所以在生成雪碧圖的時候，兩個圖標之間最好留一點距離。請參考我寫的文章，裡面有實現原理以及項目demo 移動端適配之雪碧圖(sprite)背景圖片定位

別用雪碧圖了。其實不光是手淘的Flexible，連普通的流體布局（不對iphone做顯示優化）的，也會出現樓上所說的像素丟失現象。Base64或者圖標字體都是不錯的解決辦法。

其實圖標字體也有坑，圖標字體其實就是矢量圖，矢量圖越大，顯示越清晰，但如果縮放的越小，同樣也會像素丟失，丟失的程度和瀏覽器和你的屏幕解析度和你的矢量圖的複雜度還有關，會呈現出不同的效果。曾經一個項目，一個文字logo採用的是圖標字體渲染，結果同樣的網頁，在普通的1080p屏和720p屏上顯示的就出現像素丟失。但在mac那個4K屏上則完美顯示（有錢就是好）。

個人也是手淘flexible方案的使用者，雖然現在的icon都是用字體圖標，之前為了使用CSS Sprites比例問題也寫過一個mixin，思路還是跟 @大漠提到的配合background-size一樣，可以參考下：

/**

|private mySprite

@mixin sprite-position-t($sprite) {

$spritesheet-w: nth($sprite, 7) - nth($sprite, 5);

$spritesheet-h: nth($sprite, 8) - nth($sprite, 6);

@if $spritesheet-w != 0px{

$sprite-offset-x-t: nth($sprite, 1) / $spritesheet-w * 100%;

}@else{

$sprite-offset-x-t: nth($sprite, 3);

}

@if $spritesheet-h != 0px{

$sprite-offset-y-t: nth($sprite, 2) / $spritesheet-h * 100%;

}@else{

$sprite-offset-y-t:nth($sprite,4);

}

background-position: $sprite-offset-x-t $sprite-offset-y-t;

}

@mixin sprite-size($sprite) {

background-size: nth($sprite, 7) nth($sprite, 8);

}

@mixin sprite-t($sprite) {

@include sprite-image($sprite);

@include sprite-position-t($sprite);

@include sprite-width($sprite);

@include sprite-height($sprite);

@include sprite-size($sprite);

}

@mixin mySprites($sprites) {

@each $sprite in $sprites {

$sprite-name: nth($sprite, 10);

.#{$sprite-name} {

@include sprite-t($sprite);

}

配合gulp下的spritesmith來使用。因為後期沒有再用到這個，代碼沒有進一步優化，借鑒下思路還可以。

其實是可以用的，除了設置background-size為rem單位，還要處理下雪碧圖

處理前：

處理後：