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

说明书

本发明公开了一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法，包括以下步骤：S1：页面首次初始化过程；S2：在步骤S1的基础上，窗口尺寸变化时的页面调整过程。本发明针对IE10等浏览器对CSS sprites加自适应布局单位的支持不好的问题，通过在页面初始化以及窗口调整的时候增加相应的处理函数，既可以解决这种兼容性问题，而无需大幅度调整页面原有设计，有效的解决了页面开发过程中新技术和浏览器兼容性的矛盾。

技术领域

本发明属于嵌入式通信设备软件配置界面开发技术领域，具体涉及一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法。

背景技术

WiFi联盟在近期公布了最新的网络协议—WiFi6协议，现有的WiFi系统基本都是基于此协议下的，因此，若路由器模组实现与外部设备的通讯，现有的路由器模组都配备有WiFi6系统。在实际的应用过程中，由于单频器包括若干单频模块以及双频器包括若干双频模块，能够让WiFi6系统配备有多路数据通道，保证传输速率，提高WiFi6系统的数据吞吐量，让WiFi6系统的传输数据量更加充足。

数据传输已经具备相当的传输速率，但是在数据无法兼容时，即使数据传输再快也无法克服数据兼容缺陷，加快界面显示速度；如：浏览器的种类很多，而且每一款浏览器的版本也很多。对于嵌入式通信设备的配置界面来说，需要尽可能的考虑浏览器的兼容性问题。同时为了开发配置界面系统的快速和便捷，会尽可能采用新的技术进行设计。常常会出现新技术和浏览器兼容性之间出现矛盾的情况。为优化页面加载速度,使用CSS Sprites技术将页面会用到多个小图像整合到一个图像文件中，然后使用background-position及background-size等进行背景定位得到需要的图片。CSS自适应布局可以完美匹配各种终端的窗口尺寸，并可随着窗口大小的调整而动态调整元素的尺寸和位置。但是当CSS Sprites技术和自适应布局结合起来时，就会遇到特定浏览器的兼容性问题。

针对以下两点同时满足的场景，即，1、为优化界面显示速度，使用CSS Sprites技术；2、为适应窗口尺寸的变化动态调整图片的大小，在background-position及background-size中使用自适应vw、vh的视窗单位。

上述限定的场景所存在的问题：background-position及background-size中使用vw和vh自适应布局单位对于IE浏览器为例来说，需要在IE11以上的浏览器版本才可以很好的支持，IE10及以下版本支持不好，这样会造成同一套页面代码不能兼容IE10等浏览器。

因此,现阶段需设计一种一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法,来解决以上问题。

发明内容

本发明目的在于提供一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法，用于解决上述现有技术中存在的技术问题，如：为优化界面显示速度，使用CSSSprites技术，为适应窗口尺寸的变化动态调整图片的大小，在background-position及background-size中使用自适应vw、vh的视窗单位，background-position及background-size中使用vw和vh自适应布局单位对于IE浏览器为例来说，需要在IE11以上的浏览器版本才可以很好的支持，IE10及以下版本支持不好，这样会造成同一套页面代码不能兼容IE10等浏览器。

为实现上述目的，本发明的技术方案是：

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

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

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

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