基于CSS预处理器的网页适配多种浏览器尺寸的方法及系统技术方案

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

Method and System of Web Page Adaptation to Various Browser Sizes Based on CSS Preprocessor

The present invention proposes a method of adapting web pages to various browser sizes based on CSS preprocessor, which includes: determining different screen sizes to be adapted; designing web sites according to the maximum screen sizes to be adapted to obtain design drafts; obtaining the scaling ratio of each smaller size to the maximum size based on width and/or height; and adopting CSS preprocessor. Write a preprocessable style sheet and specify its size and position change rules in each size screen according to the size and location attributes of each element in the design draft combined with the scaling ratio. The preprocessor of CSS automatically generates corresponding sizes for each screen according to the size and position change rules of each element in the preprocessable style sheet in each size screen. Style sheet. The advantage is that front-end developers have only one set of stylesheets to maintain, which reduces maintenance costs compared with the existing model of writing a set of stylesheets for each screen size.

【技术实现步骤摘要】
基于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预处理器的网页适配多种浏览器尺寸的方法，其中，具体本文档来自技高网...

【技术保护点】
1.一种基于CSS预处理器的网页适配多种浏览器尺寸的方法，其特征在于：通过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中的根据设计稿中每个元素的大小和位置属...

【专利技术属性】
技术研发人员：何理，张杰，李华敬，曲涛，沈徐洋，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：上海,31