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

权利要求书

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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