使用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 ,能够随着屏幕宽度来改变大小