[发明专利]一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法

权利要求书

1.一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法，其特征在于，包括以下步骤：

S1：页面首次初始化过程；

S2：在步骤S1的基础上，窗口尺寸变化时的页面调整过程；

其中步骤S1包括以下子步骤：

S11：匹配浏览器；浏览器的匹配在页面加载后进行，该过程识别筛选出存在CSSSprites中使用自适应布局单位的浏览器，对于这些类型的浏览器执行后续的流程；

S12：图片位置信息备份；位置信息备份过程将首次页面初始化后的原始页面窗口尺寸以及使用CSS sprites涉及的原始元素图片位置信息保存起来；

需要备份的信息包括：

(1)原始页面的窗口尺寸，即originWinWidth和originWinHeight；

(2)所有使用CSS background-position属性的元素建立原始图片位置信息数据库；原始图片位置信息数据库的表单字段定义如下：

class定义为元素CSS class的名称；

bg_width定义为原始background-position的width，单位为px；

bg_height定义为原始background-position的height，单位为px；

原始图片位置信息数据库的建立过程如下，在采用jquery代码时：

a、筛选并获取包含background-position属性元素的原始位置参数；

originPosition＝$(this).css('background-position')；

b、生成原始图片位置信息数据库；

bg_position_array[i].class＝$(this).attr(class)；

bg_position_array[i].bg_width＝originPosition.split(“”)[0]；

bg_position_array[i].bg_height＝originPosition.split(“”)[1]；

经过这个图片位置信息备份过程，原本使用vw、vh自适应布局单位的位置信息会自动转化为以像素px为单位的位置信息供后续的过程调用；

c、对于使用background-size显式设定了图片大小并且background-size的单位也是vw、vh自适应布局单位的情况，需要根据原窗口大小重新设定background-size：

origin_bg_size＝originWinWidth*vw％+originWinHeight*vh％；

其中，vw％为图片宽度和窗口宽度的比率，vh％为图片高度和窗口高度的比率；

S13：CSS重加载；针对原始图片位置信息数据库，通过jquery的

$(this).css(“background-position”，“转化后的位置信息”)以及$(this).css(“background-size”,origin_bg_size)调用来重新加载转化后的图片位置信息从而得到希望的图片；

其中步骤S2包括以下子步骤：

S21：第二次匹配浏览器；

在页面控制代码中注册window resize的事件处理函数，当侦测出窗口改变的时候进行匹配浏览器的动作，匹配后执行后续的图片位置信息重计算及CSS重加载；

S22：图片位置信息重计算；

(1)获取窗口当前尺寸，即currentWinWidth和currentWinHeight，并与原始图片位置信息数据库中的窗口信息计算获取窗口变化的比例：

ratio_x＝currentWinWidth/originWinWidth；

ratio_y＝currentWinHeight/originWinHeight；

ratio_x为宽度方向的变化比率，ratio_y为高度方向的变化比率；

(2)对原始图片位置信息数据库中的每一个表项i，重新计算出新的background-position值，即：

new_position_array[i].class＝bg_position_array[i].class；

new_position_array[i].bg_width＝bg_position_array[i].bg_width*ratio_x；

new_position_array[i].bg_height＝bg_position_array[i].bg_height*ratio_y；

经过以上的计算，生成新位置信息数据集new_position_array；

（ 3） 对于使用background-size显式设定了的图片文件大小且使用了自适应布局单位的情况，需要重新计算新窗口下的图片大小，即：

new_bg_size＝currentWinWidth*vw％+currentWinHeight*vh％；

S23：第三次CSS重加载；

对新位置信息数据中的每一个表项，生成新的css格式，即：

new_css[i]＝new_position_array[i].bg_width+new_position_array[i].bg_height；

调用css指令，重新加载对应元素的样式，当使用jquery代码时：

$(new_position_array[i].class).css(“background-position”,new_css[i])；

对于使用background-size显式设定了图片大小的情况，需要额外的重新加载，即：

$(this).css(“background-size”,new_bg_size)。