首页 > 代码库 > 响应式下的雪碧图解决方案

响应式下的雪碧图解决方案

2024-09-02 05:19:56   220人阅读

一、概述

　　在传统的居中布局时，我们常用background-position这个属性来进行雪碧图的定位，在减少数据量的同时，保证准确定位。在移动端使用越来越重的现在，以往的传统定位，已经无法达到目的，那么是否有合适的解决方案呢？答案是有的，让我们先来了解background的两个属性：

　　　　background-position:背景图片相对容器原点的起始位置。详解可以查看另一篇博客：background-position 详解。

　　　　background-size: 规定背景图的尺寸；

　　　　　　语法：background-size: width height;

　　　　　　取值：auto | length | percentage | cover | contain
            　　　　auto: 自适应；
            　　　　length：确定的宽高；
            　　　　cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；
            　　　　contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；
            　　　　百分比：以父元素的百分比来设置背景图像的宽度和高度。
　　
　　预备知识已经ready，接下来如何解决问题。
　　
　　来看以下四种场景：
        场景1、非响应式下的雪碧图，且子图尺寸相同
        场景2、响应式下的雪碧图，且子图尺寸相同
        场景3、非响应式下的雪碧图，且子图尺寸不同
        场景4、响应式下的雪碧图，且子图尺寸不同
　　
二、子图尺寸相同的情况下
　　该场景下，由于子图的尺寸相同，完全可以使用％来减少人为计算。使用％需要用到换算公式，由background-position 详解的结论，可知：
background-position: a% b%; ＝》 background-position: x y;
其中：containerWidth为容器宽，containerHeight为容器高，bgWidth为雪碧图宽，bgHeight为雪碧图宽，
则存在（公式1）：
　　x = (containerWidth - bgWidth) * a%
　　y = (containerHeight - bgHeight) * b%
　　示例如下：　
　　　　技术分享
　　　　　图2.1  原图［654 vs 436 即 218 * 3 vs 218 * 2］
 
        想要的结果：选择第一排，第二张图
　　　　技术分享
　　　 　　图2.2   预期结果
 

　　2.1、场景1：传统布局

　　　　传统布局下，容器尺寸与子图的尺寸相同，由公式1可推出以下结论：

由于子图尺寸相同，得出（公式2）：
　　bgWidth = xTotal * containerWidth;
　　bgHeight = yTotal * containerHeight;
其中xTotal为雪碧图横向的子图数量，yTotal为雪碧图纵向的子图数量。

由公式1、公式2可推导出（公式3）： 
　　a% = x / (containerWidth - bgWidth) 
      = x / (containerWidth - xTotal * containerWidth) 
      = x / (1 - xTotal) * containerWidth 

　　b% = y / (containerHeight - bgHeight) 
      = y / (containerHeight - yTotal * containerHeight) 
      = y / (1 - yTotal) * containerHeight

定位时，背景图的起始点，时常在某个子图的起始点上，所以可以推导出（公式4）：
　　a% = x / (1 - xTotal) * containerWidth
　　　 = n * containerWidth / (1 - xTotal) * containerWidth
　　　 = n / (1 - xTotal)

　　b% = y / (1 - yTotal) * containerHeight
　　　 = m * containerHeight / (1 - yTotal) * containerHeight
      = m / (1 - yTotal)
　　其中，m、n一定是一个小于等于0的数。　　

需要得到预期结果，使用公式4，
　　起始位置：x＝－1 * containerWidth，y = 0 * containerHeight;
　　　　 so: n=－1，m＝0；
　　子图数：xTotal = 3; yTotal = 2;

要得到第二张图的显示定位应该为：　　　　　　
　　a% = n / (1 - xTotal) = －1 / (1 - 3) = 50%
　　b% = m / (1 - yTotal) = 0 / 1 - 2 = 0%
　　　　以下代码得到预期结果：
width: 218px;
height: 218px;
background-position: 50% 0;
background-repeat: no-repeat;

 

　　2.2、场景2：响应式布局下

　　　　回顾公式1:　　　

　　　　　　x = (containerWidth - bgWidth) * a% 　　　　　　

　　　　　　y = (containerHeight - bgHeight) * b%

　　响应式情景下，containerWidth会缩放，而此时bgWidth的值不会变化，使得公式2无法得到。
　　解决该问题的关键是，使得bgWidth的大小，随着containerWidth的变化而变化。
　　再回过头看看background-size这个属性，它可以使得背景图根据容器的变化而变化，且它的百分比属性可以以父元素的百分比来设置背景图像的宽度和高度，从而达到父容器与背景图的一个对应关系。

　　如果需要获得公式2，那么需要将背景图按照怎样的方式变化呢？

　　当 background-size: 100% auto；时，得到的结果：

　　技术分享

　　　　　　图2.3  100%

　　由此可看出，当xpos为100%时，背景图缩放到父容器相同大小。

　　当xpos为300%时，背景图缩放到父容器的3倍大，此时背景图与父容器的关系同场景一相同，从而可以应用公式2，此时的xTotal既代表子图横向的数量，也表示背景图横向的收缩比。

　　由此当是如下代码，亦可得到预期的第二张图：

width: 118px;
height: 118px;
background-size: 300% auto;
background-position: 50% 0;
background-repeat: no-repeat;

　　总结：在响应式下，且子图尺寸相同时，将background-size 的缩放比设置成与子图数量相同，再通过background-position可实现轻松定位。x，y任意方向设置缩放比，另一方向可使用auto值，实现背景图的等比例缩放。此例中，虽然子图的形状为正方形，但实际操作中，不要求。矩形一样可以按照同样的公式实现，因为纵轴和横轴的计算都是分开的，相互没有影响。

三、子图尺寸不同

　　在子图尺寸不同的情况下，通常我们不会使用百分比定位，而是选择具体值定位。

　　示例：

　　　　技术分享

　　　　图3.1 不规则雪碧图

　　　取到第一个下载按钮：

　　　　技术分享　　　

　　3.1、场景3：传统布局下的定位

　　代码如下：　　　　

width: 49px;
height: 24px;
background-position: 0 -62px;
background-repeat: no-repeat;

　　　　直接使用具体值定位，较为简单，结果与预期相符。

　　3.2、场景4：响应式下的定位

　　　

　　未完待续。。。。。。

　　　

 

响应式下的雪碧图解决方案


联系
我们