CN104537002A - 一种css兼容性调优的方法及系统 - Google Patents

Abstract

本申请提供了一种CSS兼容性调优的方法中，包括插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；根据当前项目的设计要求，调整所述待展示页面的属性；在不同系统环境不同浏览器平台下展示所述待展示页面；检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。实现了对传统行业Web应用的响应式设计，优先考虑其对多浏览器的支持，着重于桌面端的Web页面兼容性调优，降低了CSS兼容性调优的难度及时间成本，能够很好的适配不同分辨率桌面以及不同浏览器。

Description

一种CSS兼容性调优的方法及系统

技术领域

本申请涉及兼容性领域，特别涉及一种CSS兼容性调优的方法及系统。

背景技术

随着互联网开发技术的发展和移动互联网的普及，人们对CSS兼容性调优的要求越来越高。

现有的对CSS兼容性调优的方法多以移动优先为首要设计目标，但是对于传统行业内部系统，特别涉及金融、政府、教育等领域，因为其操作用户的范围性、应用环境的敏感性等，使得传统行业Web应用中CSS样式不能很好适配不同分辨率桌面以及不同浏览器，导致网页CSS兼容性调优过程繁琐、实施不便的问题。

因此，如何能够简单的实现CSS兼容性调优，很好的适配不同分辨率桌面以及不同浏览器是本领域技术人员目前需要解决的技术问题。

发明内容

本申请所要解决的技术问题是提供一种CSS兼容性调优的方法及系统，解决了现有技术中不能很好适配不同分辨率桌面以及不同浏览器，导致网页CSS兼容性调优过程繁琐、实施不便的问题。

其具体方案如下：

一种CSS兼容性调优的方法，该方法包括：

插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；

利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；

根据当前项目的设计要求，调整所述待展示页面的属性；

在不同系统环境不同浏览器平台下展示所述待展示页面；

检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。

上述的方法，优选的，

所述插入CSS文件到待展示页面中为：

在所述待展示页面的标签中以链接的形式插入所述CSS文件。

上述的方法，优选的，

所述针对桌面端Web应用的视图布局样式文件，采用流式栅格系统，针对所述桌面端Web应用常用的页面元素书写了完整的兼容性样式方案。

上述的方法，优选的，

所述兼容性样式方案包括：

针对不同系统环境不同浏览器下的样式重构调整、具备完整的流式栅格系统、可适配多分辨率桌面设备、可稳定设置元素的尺寸位置或者可实现多层级元素嵌套。

上述的方法，优选的，

所述的针对低版本浏览器的调整样式文件，针对传统行业常使用的三种低版本浏览器IE6、IE7、IE8分别书写了样式缺陷的弥补性样式方案。

上述的方法，优选的，

所述样式缺陷的弥补性样式方案，包括：

浮动产生双倍间距的解决方案，页面最小宽度的解决方案，高度不适应的解决方案，DIV元素浮动导致文本产生3像素间距的解决方案等。

一种CSS兼容性调优的系统，该系统包括：

插入单元，用于插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；

命名单元，用于利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；

调整单元，用于根据当前项目的设计要求，调整所述待展示页面的属性；

展示单元，用于在不同系统环境不同浏览器平台下展示所述待展示页面；

检查单元，用于检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。

本申请提供的一种CSS兼容性调优的方法中，插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；根据当前项目的设计要求，调整所述待展示页面的属性；在不同系统环境不同浏览器平台下展示所述待展示页面；检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。实现了对传统行业Web应用的响应式设计，优先考虑其对多浏览器的支持，着重于桌面端的Web页面兼容性调优，降低了CSS兼容性调优的难度及时间成本，能够很好的适配不同分辨率桌面以及不同浏览器。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请的一种CSS兼容性调优的方法实施例1的流程图；

图2是本申请的一种CSS兼容性调优的系统实施例1的结构示意图。

具体实施方式

本发明的核心是提供一种CSS兼容性调优的方法及系统，解决了现有技术中不能很好适配不同分辨率桌面以及不同浏览器，导致网页CSS兼容性调优过程繁琐、实施不便的问题。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

参考图1，示出了本申请一种CSS兼容性调优的方法实施例1的流程图，可以包括以下步骤：

步骤S101：插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件。

本申请中涉及到的CSS是一种用于为结构化文档(如HTML文档、XML应用)添加样式的计算机语言，常被用作标准网页设计中网页内容的表现，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。

响应式设计：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

栅格系统：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来，可以让网页的信息呈现更加美观易读，更具可用性。

移动优先：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

本申请中，所述插入CSS文件到待展示页面中为：在所述待展示页面的标签中以链接的形式插入所述CSS文件。

所述针对桌面端Web应用的视图布局样式文件，采用流式栅格系统，针对所述桌面端Web应用常用的页面元素书写了完整的兼容性样式方案。

所述兼容性样式方案包括：

针对不同系统环境不同浏览器下的样式重构调整、具备完整的流式栅格系统、可适配多分辨率桌面设备、可稳定设置元素的尺寸位置或者可实现多层级元素嵌套。

所述视图布局样式文件包括：大分辨率桌面(宽度大于1200像素)，中分辨率桌面(宽度大于960像素)，小分辨率桌面(宽度大于768像素)，栅格系统的最大列数为12列，栅格系统的行选项，栅格系统的元素宽度可包含1至12列和栅格系统的元素水平位置可通过偏移列数来控制。

所述的针对低版本浏览器的调整样式文件，针对传统行业常使用的三种低版本浏览器IE6、IE7、IE8分别书写了样式缺陷的弥补性样式方案。

所述样式缺陷的弥补性样式方案，包括：

浮动产生双倍间距的解决方案，页面最小宽度的解决方案，高度不适应的解决方案，DIV元素浮动导致文本产生3像素间距的解决方案等。

步骤S102：利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性。

所述预设的组件类名为：Component Name(组件名)+View Group(视图类别)+Index(or Number)(索引)。

具体实现例如：

其具体含义表示为：小分辨率桌面(宽度介于768像素至960像素)下占宽半屏幕尺寸、单行、居中的div元素。

步骤S103：根据当前项目的设计要求，调整所述待展示页面的属性。

根据当前项目的需求设计和详细设计的要求，对所述待展示页面的属性进行整体调整。

由于不同的项目，涉及到的属性不同，且不同的项目的需求设计和详细设计的要求也不同，那么所述属性的调整需要依据具体项目的具体情况而定。

步骤S104：在不同系统环境不同浏览器平台下展示所述待展示页面。

为了使所述待展示页面能够适应不同系统环境不同浏览器平台，需要对所述待展示页面在各个系统环境各个不同浏览器平台下均进行展示操作。

步骤S105：检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。

分别检查所述待展示页面在各个不同系统环境不同浏览器平台下的展示效果，当所述待展示页面在其中一个系统环境一种浏览器下的展示效果满足预设展示效果时，则说明所述待展示页面符合所述当前展示的系统环境浏览器的要求，当所述待展示页面在其中一个系统环境一种浏览器下的展示效果不满足预设展示效果时，则说明所述待展示页面不符合所述当前展示的系统环境浏览器的要求，需要对所述待展示页面对应的属性进行调整，然后再利用同样的方法检查所述待展示页面在其他系统环境其他浏览器下的展示效果，直到所述待展示页面在所有可能涉及到的系统环境浏览器下的展示效果全部检查完成为止。

本申请提供的一种CSS兼容性调优的方法中，插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；根据当前项目的设计要求，调整所述待展示页面的属性；在不同系统环境不同浏览器平台下展示所述待展示页面；检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示对应的属性进行调整。实现了对传统行业Web应用的响应式设计，优先考虑其对多浏览器的支持，着重于桌面端的Web页面兼容性调优，降低了CSS兼容性调优的难度及时间成本，能够很好的适配不同分辨率桌面以及不同浏览器。

与上述本申请一种CSS兼容性调优的方法实施例1所提供的方法相对应，参见图2，本申请还提供了一种CSS兼容性调优的系统实施例1，在本实施例中，该系统包括：

插入单元201，用于插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；

命名单元202，用于利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；

调整单元203，用于根据当前项目的设计要求，调整所述待展示页面的属性；

展示单元204，用于在不同系统环境不同浏览器平台下展示所述待展示页面；

检查单元205，用于检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。

综上所述，本申请提供的一种CSS兼容性调优的方法及系统，能够简单的实现CSS兼容性调优，很好的适配不同分辨率桌面以及不同浏览器。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

以上对本申请所提供的一种CSS兼容性调优的方法及系统进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (7)

1.一种CSS兼容性调优的方法，其特征在于，该方法包括：

插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；

利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；

根据当前项目的设计要求，调整所述待展示页面的属性；

在不同系统环境不同浏览器平台下展示所述待展示页面；

检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。

2.根据权利要求1所述的方法，其特征在于，所述插入CSS文件到待展示页面中为：

在所述待展示页面的标签中以链接的形式插入所述CSS文件。

3.根据权利要求1所述的方法，其特征在于，所述针对桌面端Web应用的视图布局样式文件，采用流式栅格系统，针对所述桌面端Web应用常用的页面元素书写了完整的兼容性样式方案。

4.根据权利要求3所述的方法，其特征在于，所述兼容性样式方案包括：

针对不同系统环境不同浏览器下的样式重构调整、具备完整的流式栅格系统、可适配多分辨率桌面设备、可稳定设置元素的尺寸位置或者可实现多层级元素嵌套。

5.根据权利要求1所述的方法，其特征在于，所述的针对低版本浏览器的调整样式文件，针对传统行业常使用的三种低版本浏览器IE6、IE7、IE8分别书写了样式缺陷的弥补性样式方案。

6.根据权利要求5所述的方法，其特征在于，所述样式缺陷的弥补性样式方案，包括：

浮动产生双倍间距的解决方案，页面最小宽度的解决方案，高度不适应的解决方案，DIV元素浮动导致文本产生3像素间距的解决方案等。

7.一种CSS兼容性调优的系统，其特征在于，该系统包括：

插入单元，用于插入CSS文件到待展示页面中，所述CSS文件包括针对桌面端Web应用的视图布局样式文件和针对低版本浏览器的调整样式文件；

命名单元，用于利用所述视图布局样式中预设的组件类名命名所述待展示页面中各元素的类属性；

调整单元，用于根据当前项目的设计要求，调整所述待展示页面的属性；

展示单元，用于在不同系统环境不同浏览器平台下展示所述待展示页面；

检查单元，用于检查所述待展示页面是否满足预设的展示效果，若否，则对所述待展示页面对应的属性进行调整。