CN109683895A

CN109683895A - 基于css预处理器的网页适配多种浏览器尺寸的方法及系统

Info

Publication number: CN109683895A
Application number: CN201811569341.5A
Authority: CN
Inventors: 何理; 张�杰; 李华敬; 曲涛; 沈徐洋
Original assignee: Shanghai Bilibili Technology Co Ltd
Current assignee: Shanghai Bilibili Technology Co Ltd
Priority date: 2018-12-21
Filing date: 2018-12-21
Publication date: 2019-04-26

Abstract

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

Description

基于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。

上述技术方案虽然可以较为精确地控制不同尺寸的屏幕下网页的显示方式，但缺点也非常明显，即维护成本很高，例如，当设计稿中的某一元素需要发生变动时，再比如需要在网页上添加新的元素或修改现有元素的位置时，前端开发人员需要对每一个屏幕尺寸的样式表都对应进行相应的修改，维护过程非常繁琐。

专利号：201210320716.0，发明名称：网页布局的自适配方法及系统，其公开了一种网页布局的自动适配方法，其包括：代理服务器接收用户通过移动终端发送的访问第三方站点的网页的请求；代理服务器抓取所述网页，并对所述网页进行分析以获得所述网页中至少部分的CSS属性；所述的代理服务器获得所述网页对应的转换规则；代理服务器根据所述转换规则对CSS属性进行修改，并将修改后的CSS属性的网页发送至移动终端。其中，所述代理服务器获得所述网页后，解析所述网页的文档对象模型DOM树结构，并选择其中需要调整的节点并记录节点的标签、所述标签对应的CSS属性集属性值。该方法中由于每一次访问均需要服务器根据转换规则重新对CSS属性进行修改，因此，对服务器的负荷量比较大。

专利申请号：201810213382.4，发明名称：一种界面显示方法和装置，其公开了一种界面显示方式，通过viewport-fit设置目标网页在可视窗口中采用网页内容完全覆盖可视窗口的布局方式；通过constant将所述目标网页的网页内容的主体区域限定在显示界面的安全区域中；对所述目标网页底部的fixed元素进行适配；通过设置的布局方式、限定的显示界面和适配的fixed元素对所述目标网页在显示器中进行显示。其优点是：通过viewport-fit和constant相结合的方式，将目标网页的显示可以与显示界面相适配，从而解决了现有的界面适配的灵活性低的技术问题，达到了高效实现界面适配的技术效果。该方式实施起来较为复杂。

专利号：201180076158.1，发明名称：提供网页的方法及装置，其公开了一种从网络服务器向用户设备提供针对一账户的网页的方法，该方法包括在所述用户设备侧的以下步骤：从所述网络服务器接收所述网页的页面内容、与所述账户相关联的访问行为信息、页面布局适配器脚本以及用户活动监视器脚本；基于访问行为信息运行页面布局适配器脚本；示出带有经适配的页面布局的网页；使用所述用户活动监视器脚本监视在所述网页上的浏览活动；基于监视到的浏览活动更新所述访问行为信息；以及将关于所述账户的经更新的访问行为信息发送给所述网络服务器；其中，所示出的网页包括用户对其访问的次数超过阈值的偏好片段。即通过得到对该网页的用户访问行为信息；以及，将该网页的页面内容和页面布局适配器提供给用户设备，使得用户设备根据访问行为信息产生带有经适配的页面布局的更新的网页。该方式可以达到客户端浏览器实现页面布局的适配，使得能够减少网络服务器为用户构造或产生特定网页所需的时间量。

发明内容

本发明的目的在于提供一种基于CSS预处理器的网页适配多种浏览器尺寸的方法及系统，通过CSS预处理器编写可预处理样式表，在一套可预处理样式表中根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则，从而简化了使用媒体查询适配不同浏览器尺寸的过程，使得前端开发人员不必对不同尺寸的样式表分开编写，而是在一套样式表中进行统一编写，以达到使用一套代码就可以适配多种浏览器尺寸的目的。

为了达到上述目的，本发明通过以下技术方案实现：

一种基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征是：

通过CSS预处理器编写包含每个元素的大小和位置属性结合缩放比例指定其在不同尺寸屏幕中的大小和位置变化规则的可预处理样式表，再由可预处理样式表生成每种屏幕尺寸相应的样式表。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其中，具体包含：

S1.1、确定需要适配的多个不同的屏幕尺寸；

S2.1、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；

S3.1、以宽度和/或高度为基准，得到每一种较小尺寸相对于最大尺寸的缩放比例；

S4.1、通过CSS预处理器编写可预处理样式表，在可预处理样式表中根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则；

S5.1、由CSS预处理器根据可预处理样式表中的各元素在每种尺寸屏幕中的大小和位置变化规则自动为每种屏幕尺寸生成相应的样式表。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其中，所述的步骤S4.1中：

通过CSS预处理器编写的可预处理样式表中还可直接指定某些元素在相应屏幕尺寸中的大小和位置变化规则。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其中，所述的步骤S3.1中的以宽度和高度为基准，得到较小尺寸相对于最大尺寸的缩放比例指：

假定最大尺寸的宽度为X，高度为Y；

较小尺寸的宽度为x，高度为y；

缩放比例包含横向缩放比例以及纵向缩放比例，横向缩放比例x’＝x/X，纵向缩放比例y’＝y/Y。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其中，所述的步骤S4.1中的根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则指：

假定最大尺寸中某一元素的宽度为a，高度为b，距离页面左边边距为c，距离页面顶边边距为d；

所述的元素在较小尺寸中的大小和位置变化包含：宽度变化、高度变化以及左边、顶边边距变化；宽度变化为a×x’，高度变化为b×y’，左边边距变化为c×x’，顶边边距变化为d×y’。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其中：

所述的CSS预处理器为SASS或LESS。

对字体元素在每种尺寸屏幕中的大小和位置变化规则通过直接指定的方式来实现。

S1.2、确定需要适配的多个不同的屏幕尺寸；

S2.2、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；

S3.2、通过CSS预处理器编写可预处理样式表，在可预处理样式表中根据设计稿中每个元素的大小和位置属性直接指定各个元素在每种尺寸屏幕中的大小和位置变化规则；

S4.2、由CSS预处理器根据可预处理样式表中的各元素在每种尺寸屏幕中的大小和位置变化规则自动为每种屏幕尺寸生成相应的样式表。

一种基于CSS预处理器的网页适配多种浏览器尺寸的系统，其特征是，包含：

CSS预处理器，用于生成上述的各种屏幕尺寸相应的样式表；

不同屏幕尺寸的用户操作端，分别通过CSS媒体查询的方式根据对应的样式表进行页面元素的展示。

上述的基于CSS预处理器的网页适配多种浏览器尺寸的系统，其中：

所述的用户操作端包含：PC端、手机移动端、平板电脑。

本发明与现有技术相比具有以下优点：

1、对于PC页面的自适配，前端开发人员只有一套样式表需要维护，相较现有的对每一屏幕尺寸分别编写一套样式表的模式来说，降低了维护成本；

2、通过CSS预处理器的mixin功能，将设计人员设计稿中的各个元素相关的样式统一集中到一个预处理样式表中，进行统一编写，为后期的修改带来方便；

3、用一套可预处理样式表，根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则，从而简化了使用媒体查询适配不同浏览器尺寸的过程。

附图说明

图1为现有技术的网页适配多种浏览器尺寸的方法原理图；

图2为本发明的基于CSS预处理器的网页适配多种浏览器尺寸的方法原理图；

图3为本发明的实施例一的方法流程图

图4为本发明的实施例二的方法流程图；

图5为本发明的实施例中的实际的SASS代码样例；

图6为本发明的实施例中的通过SASS代码生成的适配不同尺寸屏幕的样式样例。

具体实施方式

以下结合附图，通过详细说明一个较佳的具体实施例，对本发明做进一步阐述。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。在本说明书中，诸如第一和第二这样的形容词仅可以用于将一个元素或动作与另一元素或动作进行区分，而不必要求或暗示任何实际的这种关系或顺序。在环境允许的情况下，参照元素或部件或步骤(等)不应解释为局限于仅元素、部件、或步骤中的一个，而可以是元素、部件、或步骤中的一个或多个等。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

下面对本申请涉及到的几个术语解释如下：

1)样式表，样式表是终端用户浏览器能够识别的一种格式，其中包含了每个页面元素的外观信息，如位置、大小、网页文字的字号、颜色等，但不包含页面上具体的文字内容；

2)媒体查询，媒体查询是当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

3)混入，混入(混合)是指定义一个对象，让组件去继承该对象的方法和状态的过程，该对象也被称为混入(混合)对象。若组件和被继承的混合对象具体相同的生命钩子函数将要被执行，则混合对象的函数会优先执行，然后再到组件内相同函数执行，但仅限于生命钩子函数；混入还可以包含所有的CSS规则，以及任何其他在Sass文档中被允许使用的东西；

4)Sass，CSS预处理器的一种，SyntacticallyAwesomeStylesheets，Sass是一个将脚本解析成CSS的脚本语言，即SassScript；

5)LESS，CSS预处理器的一种，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件；

本发明针对PC端媒体查询通常需要为不同的浏览器尺寸分别编写一套样式表，虽然可以较为精确地控制不同尺寸的屏幕下的网页元素的显示方式，但维护成本较高的缺点，提出了一种新的基于CSS预处理器的网页适配多种浏览器尺寸的方法，通过CSS预处理器编写包含每个元素的大小和位置属性结合缩放比例指定其在不同尺寸屏幕中的大小和位置变化规则的可预处理样式表，再由可预处理样式表生成每种屏幕尺寸相应的样式表。如图2所示为本发明的基于CSS预处理器的网页适配多种浏览器尺寸的方法原理图，如图3、图4所示为本发明的两种具体方法流程图，第一种如图3所示，其包含：

S1.1、确定需要适配的多个不同的屏幕尺寸；

S2.1、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；设计稿通常是PSD格式，应当注意需要尽量保留图层，保留路径，保留参数，尽量使用图层样式；

S3.1、以宽度和高度为基准，得到每一种较小尺寸相对于最大尺寸的缩放比例；

所述的可预处理样式表不同于普通的样式表(CSS)，它通常包含一些编程特性，如变量、混入(mixin)等，通过CSS预处理器(preprocessor)可以生成最终的样式表，当规范变更时，我们只需要在mixin中更新一次语法规范即可；CSS预处理器是一种语言，用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的CSS更见简洁，适应性更强，代码更直观等诸多好处。

目前业界使用较多的可预处理样式表技术有SASS和LESS；

本发明的工作原理是通过使用CSS预处理器提供的mixin功能，在指定某个CSS属性时，例如长度属性，同时指定其在其他屏幕宽度下的值(或其值相对初始值的比例)，从而使得设计人员设计稿中的各个元素相关的样式统一集中到一个预处理样式表中，进行统一编写，为后期的修改带来方便。

在部分实施例中，所述的步骤S4.1中：通过CSS预处理器编写的可预处理样式表中还可直接指定某些元素在相应屏幕尺寸中的大小和位置变化规则。例如，针对字体元素，对字体元素在每种尺寸屏幕中的大小和位置变化规则可以通过直接指定的方式来实现，这样做可以有效避免某些字体元素由于等比例缩放后过小导致用户无法看清的问题，该方法具体的实施方式将在后文中进一步提到。

本实施例中，所述的步骤S3.1中的以宽度和高度为基准，得到较小尺寸相对于最大尺寸的缩放比例，以及步骤S4中的根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则指：假定最大尺寸的宽度为X，高度为Y；较小尺寸的宽度为x，高度为y；缩放比例包含横向缩放比例以及纵向缩放比例，横向缩放比例x’＝x/X，纵向缩放比例y’＝y/Y。假定最大尺寸中某一元素的宽度为a，高度为b，距离页面左边边距为c，距离页面顶边边距为d；则所述的元素在较小尺寸中的大小和位置变化包含：宽度变化、高度变化以及左边、顶边边距变化；宽度变化为a×x’，高度变化为b×y’，左边边距变化为c×x’，顶边边距变化为d×y’。

上文描述的变化规则是较为全面的，实际操作应用中，可以根据具体情况进行选择，例如，在不影响外观呈现美观性的情况下对部分元素的调整进行简化，仅选择宽度、高度、页边距中的一种或两种进行规定。

本实施例中所采用的CSS预处理器为SASS，通过SASS的mixin功能来编写可预处理样式表。

第二种方式是：

S1.2、确定需要适配的多个不同的屏幕尺寸；

S2.2、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；

本发明还提出了一种基于CSS预处理器的网页适配多种浏览器尺寸的系统，其包含：CSS预处理器，用于生成如权利要求1～8中任意一项所述的各种屏幕尺寸相应的样式表，该样式表通常设置在网站服务器中；不同屏幕尺寸的用户操作端，当用户需要浏览某个网页，其浏览器将根据自身屏幕尺寸以CSS媒体查询的方式查找对应的样式表进行页面元素的展示。所述的用户操作端包含常用的PC端、手机移动端、平板电脑，也可以是其他任意的采用媒体查询方式的操作终端。

实施例

S1.1、首先，确定好需要适配的尺寸，例如本实施例中有：1920×1080、1366×768、1024×768共3种；

S2.1、以宽度或高度为基准，得到每一种较小尺寸(1366×768、1024×768)相对于最大尺寸(1920×1080)的缩放比例；如1366×768缩放比例为1366/1920＝0.711，1024×768缩放比例为1024/1920＝0.533；

S3.1、设计人员按照需要适配的最大尺寸设计网站；

S4.1、前端开发人员根据上述设计编写可预处理样式表。由步骤S3得到的可预处理样式表针对每一种尺寸，生成最终的样式表，呈现给用户。页面上每个元素的大小和位置，可以由最大尺寸的设计的大小和位置，等比例缩放得到；必要时也可以由开发人员直接指定，具体的：

例如，页面上某一按钮，在1920×1080的设计中，要求其宽度为180px，距离页面左边边距为100px。开发人员在可预处理样式表中只指定这些值，通过预处理器生成后，在另外两种尺寸的样式表中，宽度和左边距都等比例缩放。在1366×768中宽度缩小为180×0.711＝128px，左边距缩小为100×0.711＝71px。

当然，设计人员也可以跳过等比例缩放的方式采用直接指定规则方式来编写预处理样式表以对所有元素进行大小和位置的规定。

此外，根据上文介绍，开发人员也可以对某些特定元素进行直接指定，例如字体元素。例如在1920×1080的设计中，要求字体大小为14px，如果等比例缩小则在小尺寸中字体过小，开发人员也可以在可预处理样式表中直接指定1366×768中的字体大小为12px。

将上述规则应用到需要使用绝对长度单位(像素)的属性上，即可使元素在不同尺寸下具有合适的缩放。

具体的，如图5、6所示，图5为本发明的实施例中的实际的SASS代码样例；图6为本发明的实施例中的通过SASS代码生成的适配不同尺寸屏幕的样式样例，以SASS为例：

在sass文件开头定义需要适配的几种宽度，如中等宽度1366px，小屏幕1200px，默认为最大的宽度1920px。

指定某个属性时使用类似如下的代码方法：

.t{

@includescaleAttr(width,200px,.72,.625)；

@includescaleAbs(font-size,18px,16px,14px)；

}

上面的scaleAttr为指定倍率模式，scaleAbs为直接指定值模式。

上述代码的含义是，在默认尺寸下，宽度width的值指定为200px，在中等屏幕1366px宽度下，缩小到0.72倍，在小屏幕1200px尺寸下，缩小到0.625倍。字体的尺寸font-size的值，默认18px，在中等屏幕1366px宽度下为16px，在小屏幕1200px宽度下为14px。

综上所述，通过本发明的技术方案，对于PC页面的自适配，前端开发人员只有一套样式表需要维护，相较现有的对每一屏幕尺寸分别编写一套样式表的模式来说，降低了维护成本；另外，本发明通过CSS预处理器的mixin功能，将设计人员设计稿中的各个元素相关的样式统一集中到一个预处理样式表中，进行统一编写，为后期的修改带来方便；用一套可预处理样式表，根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则，从而简化了使用媒体查询适配不同浏览器尺寸的过程。

尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。

Claims

1.一种基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于：

2.如权利要求1所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于，具体包含：

S1.1、确定需要适配的多个不同的屏幕尺寸；

S2.1、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；

3.如权利要求1所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于，所述的步骤S4.1中：

4.如权利要求1所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于，所述的步骤S3.1中的以宽度和高度为基准，得到较小尺寸相对于最大尺寸的缩放比例指：

假定最大尺寸的宽度为X，高度为Y；

较小尺寸的宽度为x，高度为y；

5.如权利要求2所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于，所述的步骤S4.1中的根据设计稿中每个元素的大小和位置属性结合缩放比例指定其在每种尺寸屏幕中的大小和位置变化规则指：

6.如权利要求1所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于：

所述的CSS预处理器为SASS或LESS。

7.如权利要求3所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于：

8.如权利要求1所述的基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于，具体包含：

S1.2、确定需要适配的多个不同的屏幕尺寸；

S2.2、按照需要适配的最大屏幕尺寸设计网站，得到设计稿；

9.一种基于CSS预处理器的网页适配多种浏览器尺寸的系统，其特征在于，包含：

CSS预处理器，用于生成如权利要求1～8中任意一项所述的各种屏幕尺寸相应的样式表；

10.如权利要求9所述的基于CSS预处理器的网页适配多种浏览器尺寸的系统，其特征在于：

所述的用户操作端包含：PC端、手机移动端、平板电脑。