[发明专利]基于CSS预处理器的网页适配多种浏览器尺寸的方法及系统

说明书

本发明提出了一种基于CSS预处理器的网页适配多种浏览器尺寸的方法，其包含：确定需要适配的多个不同的屏幕尺寸；按照需要适配的最大屏幕尺寸设计网站，得到设计稿；以宽度和/或高度为基准，得到每一种较小尺寸相对于最大尺寸的缩放比例；通过CSS预处理器编写可预处理样式表，在可预处理样式表中根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则；由CSS预处理器根据可预处理样式表中的各元素在每种尺寸屏幕中的大小和位置变化规则自动为每种屏幕尺寸生成相应的样式表。其优点是：前端开发人员只有一套样式表需要维护，相较现有的对每一屏幕尺寸分别编写一套样式表的模式来说，降低了维护成本。

技术领域

本发明涉及计算机科学中的web前端开发技术领域，具体涉及一种基于CSS预处理器的网页适配多种浏览器尺寸的方法及系。

背景技术

随着互联网的普及，人们很可能在各种不同尺寸的屏幕上浏览网页，例如，笔记本电脑、台式机电脑、平板电脑、手机屏幕等，其显示器屏幕大小可能是不同的，显示分辨率或者屏幕分辨率指是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

如果使用者操作的是一般笔记本电脑，其显示器屏幕大小可能是分辨率1366×768，如果使用者操作的是一些台式机，其显示器屏幕大小可能是1920×1080或更大，如果使用者操作的是平板电脑，则其显示器屏幕大小可能是1024×768，如果使用者操作的是手机，则其显示器屏幕大小可能是2560×1440，由此可见，显示器屏幕大小的不同即分辨率像素的不同都可能会影响网页的显示效果，因此，如何在不同尺寸显示器屏幕下都能正确展示网页内容成为了对网站的基本要求。

现在的主流网页结构采用HTML和CSS相结合的方式。CSS的出现使得网页的表现及内容互相分离，它可以统一地控制HTML中各标志的显示属性，从而对网页中的对象的位置排版进行像素级的精确控制，每个HTML标签都有自己的布局特点，它们均具有相应的CSS属性。

现有的网页适配不同浏览器尺寸的技术方案中，移动端一般采用rem布局，PC端一般采用媒体查询(mediaquery)，媒体查询的方法通常需要为不同的浏览器尺寸分别编写一套样式表，以便能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果，现有的工作流程如下：

首先，由设计人员提供网站的设计稿(通常为Photoshop的PSD格式)，设计稿中制定了网站的精确外观；然后，前端开发人员根据设计稿编写样式表(CSS，CascadingStyleSheets级联样式表)，它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言，样式表作为终端用户浏览器能够识别的一种格式，其中包含了每个页面元素的外观信息，如元素(element)的位置、大小，网页文字的字号、颜色等等，但是不包含页面上具体的文字内容。

然而，对于元素的位置和大小信息，由于需要适配不同显示器屏幕尺寸，因此，前端人员通常需要分别为每一种显示器屏幕尺寸分别编写和维护样式表，例如，如附图1所示，如果设计人员给出了一副1920×1080的设计稿，该设计稿的页面上某一菜单元素的设计宽度为180px(像素)，前端开发人员收到设计稿以后就会根据每一种屏幕尺寸去维护一套对应的样式表，比如，1920×1080尺寸的屏幕对应样式表1，1366×768尺寸的屏幕对应样式表2，1024×768尺寸的屏幕对应样式表3，在样式表1中设定该菜单元素的宽度为180px不变，而在样式表2以及样式表3中由于屏幕尺寸不同于原设计稿尺寸，因此分别设定该菜单元素的宽度为130px以及110px。