使用CSS3的background-size優化Sprites圖顯示

當個人Sprites圖像是300px,如何指定background-size爲32px呢？其實不難，只須要一點點數學計算,這是一個很初級的過程。

在咱們的實例中,咱們使用媒體社交圖標.我想讓他們都按16px x 16px的大小顯示。咱們將建立一個適合Retina屏幕設備的Sprites 圖像，將圖像尺寸翻倍(32px x 32px)，而且保存他。爲了保證普通顯屏設備的圖像顯示，在這個圖像的基礎上作了一半的縮小。

 

在最初的CSS樣式中，background-position的屬性值都不須要進行任何設置，由於他們的默認值都是「0」，以下所示：

#social-icons .facebook { background: url(images/social-sprite.png); background-position-x: 0px; background-position-y: 0px; height: 16px; width: 16px; } #social-icons .facebook:hover { background-position-y: -16px; } 

對於咱們的Retina屏幕顯示，咱們必須聲明一個Media Queries,該Media Queries專門針對Retina屏幕設備顯示器。咱們同時改變背景大小而不是寬度和高度。

所以，最關鍵的問題是，咱們怎麼知道background-size屬性值要設置爲多少？

這裏有一個公式

高分辨率圖像寬度 / 目標圖像寬度 = X

原始Sprites圖像寬度 / x = background-size的寬度值

實例說話

咱們高分辨率下的圖標是32px x 32px;

咱們目標圖像的寬度是「16px」；

咱們Sprites圖像的總寬度是「96px」

根據前面的公式 能夠得知

32/16 = 2

96/2 = 48

最後的一件事情。咱們只計算了背景圖像的寬度值，爲了確保背景圖像縮放比例正常，咱們將「height」值設置爲「auto」。固然你也能夠設置相的的值（設置background-sizer的寬度爲auto，高度爲具體值），但我發現設置寬度會比較容易。

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) { #social-icons .facebook { background: url(images/social-sprite2x.png); background-position-x: 0px; background-position-y: 0px; background-size: 48px auto; } #social-icons .facebook:hover { background: url(images/social-sprite2x.png); background-position-x: 0px; background-position-y: -32px; },可是對於須要自適應的web端或是移動建議使用rem來定義background-size ,能夠隨着屏幕寬度來改變大小