CN110837617A - 一种网页自适应布局方法、服务器及计算机可读存储介质 - Google Patents

一种网页自适应布局方法、服务器及计算机可读存储介质 Download PDF

Info

Publication number
CN110837617A
CN110837617A CN201910975459.6A CN201910975459A CN110837617A CN 110837617 A CN110837617 A CN 110837617A CN 201910975459 A CN201910975459 A CN 201910975459A CN 110837617 A CN110837617 A CN 110837617A
Authority
CN
China
Prior art keywords
width
page
design draft
design
height
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910975459.6A
Other languages
English (en)
Other versions
CN110837617B (zh
Inventor
刘志凯
孔祥成
姜凯英
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Priority to CN201910975459.6A priority Critical patent/CN110837617B/zh
Priority to PCT/CN2019/117347 priority patent/WO2021068331A1/zh
Publication of CN110837617A publication Critical patent/CN110837617A/zh
Application granted granted Critical
Publication of CN110837617B publication Critical patent/CN110837617B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明涉及Web前端开发领域，揭露了一种网页自适应布局方法，该方法包括：将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；当网页打开时，根据屏幕大小调整HTML元素的font‑size值，使得body中元素的属性值随font‑size值同步调整；计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可直接根据设计稿的尺寸转换成代码尺寸，只需要将终端宽度或高度作为判断基准，即可使页面的所有元素自动调整到合适的大小，页面上所有内容的布局与设计稿布局相同，完整还原设计搞比例。

Description

一种网页自适应布局方法、服务器及计算机可读存储介质
技术领域
本发明涉及Web前端开发领域，尤其涉及一种网页自适应布局方法、服务器及计算机可读存储介质。
背景技术
当前，Web前端开发领域的工作者们，在遇到网页自适应布局问题时，主要采用内容区定宽布局和媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案，虽然这些方案在一定程度上优化了页面的布局情况，优化了视觉呈现效果，但是仍无法完整地还原设计稿的尺寸比例，或者需要对布局做微调，或者需要在较小屏幕下隐藏部分元素。比如对于流式布局方案，在页面布局的时候通过百分比来定义宽度，而高度大都是用像素(pixel，px)来固定住，所以在部分屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，甚至布局出现混乱，往往仅有几个尺寸的屏幕下呈现的效果是令人满意的，这无论是视觉设计师，还是网页用户，都是无法接受这种呈现效果的。
发明内容
有鉴于此，本发明提出一种网页自适应布局方法及服务器，可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有计算机(personal computer，PC)屏幕尺寸。
首先，为实现上述目的，本发明提出一种网页自适应布局方法，该方法应用于服务器，所述方法包括：
将rem设置为层叠样式表(Cascading Stylesheet，CSS)中元素width,height,margin,padding,left top属性的单位；
当网页打开时，根据屏幕大小调整超文本标记语言(Hyper Text MarkupLanguage，HTML)元素的font-size值，使得body中元素的属性值随font-size值同步调整；
计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；
根据所述body中元素的优化后属性值生成优化页面。
可选地，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：
获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；
获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；
对比所述设计稿宽高比和所述终端屏幕宽高比得到对比结果。
可选地，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：
当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；
当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
可选地，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：
根据所述屏高和所述设计稿高计算出最小宽度；
将所述最小宽度设置于HTML元素上；
设置横向滚动条。
可选地，所述当屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素的步骤，具体包括如下步骤：
以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度；
将所述实际显示的设计稿宽度通过文档对象模型(Document Object Model，DOM)树赋值于body元素；
计算并设置新的HTML元素font-size值；
将body元素水平居中，页面两侧空白处使用背景色填充。
可选地，所述的网页自适应布局方法还包括如下步骤：
根据指令切换网页页面的页面模式；
当接收到呈现初始页面的指令时，页面切换为所述初始页面；
当接收到呈现优化页面的指令时，页面切换为所述优化页面。
可选地，所述的网页自适应布局方法还包括如下步骤：
根据指令切换网页页面的场景模式；
当接收到进入特殊场景的指令时，页面切换为特殊场景模式；
当接收到进入普通场景的指令时，页面切换为普通场景模式。
可选地，所述的网页自适应布局方法还包括如下步骤：
根据指令缩放页面或者页面内的指定内容；
当接收到针对网页的缩放指令时，对网页所有内容进行缩放；
当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。
此外，为实现上述目的，本发明还提供一种服务器，所述服务器包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页自适应布局系统，所述网页自适应布局系统被所述处理器执行时实现如上述的网页自适应布局方法的步骤。
再次，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有网页自适应布局系统，所述网页自适应布局系统可被至少一个处理器执行，以使所述至少一个处理器执行如上述的网页自适应布局方法的步骤。
相较于现有技术，本发明所提出的服务器、网页自适应布局方法及计算机可读存储介质。首先，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；其次，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；再次，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；进一步地，根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；最后，根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
附图说明
图1是本发明各个实施例一可选的应用环境示意图；
图2是图1中服务器一可选的硬件架构的示意图；
图3是本发明网页自适应布局系统第一实施例的程序模块示意图；
图4是本发明网页自适应布局系统第二实施例的程序模块示意图；
图5为本发明网页自适应布局方法第一实施例的流程示意图；
图6为本发明网页自适应布局方法第二实施例的流程示意图；
附图标记：
移动终端 1
服务器 2
网络 3
存储器 11
处理器 12
网络接口 13
网页自适应布局系统 200
设置模块 201
调整模块 202
计算模块 203
优化模块 204
生成模块 205
切换模块 206
缩放模块 207
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，在本发明中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。
参阅图1所示，是本发明各个实施例一可选的应用环境示意图。
在本实施例中，本发明可应用于包括，但不仅限于，移动终端1、服务器2、网络3的应用环境中。其中，所述移动终端1可以是移动电话、智能电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、导航装置等的可移动设备，以及诸如数字TV、台式计算机、笔记本、服务器等等的固定终端。所述服务器2可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器等计算设备，该服务器2可以是独立的服务器，也可以是多个服务器所组成的服务器集群。所述网络3可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobilecommunication，GSM)、宽带码分多址(Wideband Code Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
其中，所述服务器2中通过所述网络3分别与一个或多个所述移动终端1通信连接，以进行数据传输和交互。
本实施例中，当所述服务器2内安装并运行有网页自适应布局系统200时，当所述网页自适应布局系统200运行时，所述服务器2预存储基准测试脚本库、接口规范、计算机数据规范；当接收到被测软件代码时，扫描被测软件代码生成接口函数列表；然后匹配所述接口函数列表和所述基准测试脚本库，生成现有接口函数测试脚本、新接口函数；再根据所述接口规范、所述计算机数据规范生成所述新接口函数的参数赋值规则；进而根据所述新接口函数和所述参数赋值规则生成新接口函数测试脚本；最后根据所述新接口函数测试脚本和所述现有接口函数测试脚本生成所述被测软件代码的测试脚本。这样，通过软件工具实现测试脚本的自动创建，免去测试人员重复劳动，提高测试效率，同时还能避免手工带来失误；规范测试脚本的风格也得到统一，不了解代码的人也可以完成后期的回归测试，减少软件测试工作的人工和时间成本。
参阅图2所示，是图1中服务器2一可选的硬件架构的示意图。本实施例中，所述服务器2可包括，但不仅限于，可通过系统总线相互通信连接存储器11、处理器12、网络接口13。需要指出的是，图2仅示出了具有组件11-13的移动终端1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述服务器2的内部存储单元，例如该服务器2的硬盘或内存。在另一些实施例中，所述存储器11也可以是所述服务器2的外部存储设备，例如该服务器2上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述服务器2的内部存储单元也包括其外部存储设备。本实施例中，所述存储器11通常用于存储安装于所述服务器2的操作系统和各类应用软件，例如所述网页自适应布局系统200的程序代码等。此外，所述存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器12通常用于控制所述服务器2的总体操作，例如执行与所述移动终端1进行数据交互或者通信相关的控制和处理等。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行所述的网页自适应布局系统200等。
所述网络接口13可包括无线网络接口或有线网络接口，该网络接口13通常用于在所述服务器2与其他电子设备之间建立通信连接。本实施例中，所述网络接口13主要用于通过所述网络3将所述服务器2与一个或多个所述移动终端1相连，在所述服务器2与所述一个或多个移动终端1之间的建立数据传输通道和通信连接。
至此，己经详细介绍了本发明各个实施例的应用环境和相关设备的硬件结构和功能。下面，将基于上述应用环境和相关设备，提出本发明的各个实施例。
首先，本发明提出一种网页自适应布局系统200。
参阅图3所示，是本发明网页自适应布局系统200第一实施例的程序模块图。
本实施例中，所述网页自适应布局系统200包括一系列的存储于存储器11上的计算机程序指令，当该计算机程序指令被处理器12执行时，可以实现本发明各实施例的自动创建测试脚本操作。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，网页自适应布局系统200可以被划分为一个或多个模块。例如，在图3中，所述网页自适应布局系统200可以被分割成设置模块201、调整模块202、计算模块203、优化模块204、以及生成模块205。
其中：
所述设置模块201，用于将rem设置为CSS中元素width,height,margin,padding,left top属性的单位。
具体地，目前业内主要采用内容区定宽布局+媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案对网页页面进行自适应调整，这些方案并不能完整地还原设计稿的尺寸比例。rem是css3的一个单位属性，rem能够使得body中元素的属性值根据页面的HTML中根元素字体大小进行转变的单位，定义好屏幕中根元素的字体大小能够实现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为css中元素width、height、margin、padding、left top属性的单位。
所述调整模式202，用于当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整。
具体地，为了实现body中元素的属性值随着HTML根元素联动，还需要定义HTML元素的font-size值，而为了实现网页页面的大小自适应终端屏幕的大小，需要HTML中font-size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size值，从而调整所有DOM元素的对象及其属性、值，从而实现body中元素的属性值随font-size值同步调整。
所述计算模块203，用于计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果。
具体地，不同的设计稿存在不同的宽度和高度，也就存在不同的宽高比，而呈现设计稿的终端屏幕由于使用场景，用户喜好等原因也存在不同的宽高比，例如早期用的较多的正方形屏幕以及现在较为流行的16:9屏，且存在尺寸差异和像素差异。设计稿在终端屏幕上是像素级的呈现方式，所述尺寸差异和像素差异导致同一终端屏幕难以很好的呈现不同的设计稿，同一设计稿难以在不同的终端屏幕上呈现。因此，考虑到实际屏幕尺寸比例和设计稿宽高比例不一致的情况，往往需要在所述初始设计稿呈现参数的基础上，设计稿的呈现尺寸进行进一步的优化，而优化工作的第一步需要获取设计稿宽高比和终端屏幕宽高比，在本实施例中，网页浏览器获取所述设计稿的设计稿宽和设计稿高，然后根据设计稿宽除以设计稿高得到所述设计稿宽高比；进一步地，所述服务器还获取所述终端屏幕的屏宽和屏高，然后根据屏宽除以屏高得到所述终端屏幕宽高比；最后对比所述设计稿宽高比和所述终端屏幕宽高比。
所述优化模块204，用于对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优化body元素的属性值，得到body中元素的优化后属性值。
具体地，从上文可知，为网页尺寸与屏幕相关，而屏幕的种类难以统计，许多设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。通过rem能够实现不同终端屏幕下网页呈现的自适应布局，这是一种通用的处理方式，尤其在字体的调整方面，但是这种自适应布局方式在部分情况下仍然不能完整地还原设计稿比例，存在设计稿被拉伸变形或者无法完整呈现的情况。通过对比设计稿宽高比和终端屏幕宽高比，得到设计稿宽高比和终端屏幕宽高比的大小情况。
在实施例中，所述设置模块201还用于当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度。
具体地，根据所述屏高和所述设计稿高计算出最小宽度，然后将所述最小宽度设置于HTML元素上，并设置横向滚动条。HTML为根元素，在HTML设置最小宽度能够同步影响其他元素的呈现尺寸，最终呈现一个经过优化调整后的设计稿，更好地还原设计稿。所述屏幕宽高比小于所述设计稿宽高比，例如方正显示屏，也就是在同一像素级高度的情况下，屏幕像素级宽度小于设计稿像素级宽度，此时，为了能够完整地还原设计稿，所述设计稿像素级高度与所述屏幕像素级高度一致，或者所述设计稿像素级高度与减去浏览器头部和底部像素级高度后剩余屏幕像素级高度一致，然后根据所述设计稿宽高比得到所述设计稿像素级宽度，将所述设计稿像素级宽度设置为所述最小宽度，设置于HTML元素上，而由于所述屏幕像素级宽度小于所述设计稿像素级宽度，屏幕是无法完整呈现所述设计稿宽度的，需要设置横向滚动条。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为1620px，高度为768px，在HTML元素设置最小宽度为1620px，并设置横向滚动条，此时就能够原比例还原设计稿。
所述设置模块201还用于当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
具体地，以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度，将所述实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将body元素水平居中，页面两侧空白处使用背景色填充。
详细而言，在本案中，当所述屏幕宽高比大于所述设计稿宽高比时，即屏幕太扁时，以所述像素级屏高乘以所述设计稿宽高比，得到像素级设计稿呈现宽度，并所述像素级设计稿呈现宽度赋值给body元素，同时计算新的font-size值＝当前值*(设计稿宽高比/屏幕宽高比)，并调整HTML元素的font-size值，即让所有元素在原有基础上再次缩小一定的比例。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为945px，高度为768px，所述像素级设计稿呈现宽度为＝所述像素级屏高乘以所述设计稿宽高比＝768px*945px/768px＝945px，将945px赋值给body元素。再例如，对于font-size值，假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*((945px/768px)/(1366px/768px))＝24px*945px/1366px＝17px，将该值赋值给font-size值，即实现其他所有元素的调整。
在本实施例中，在赋值给body元素的同时，将body元素水平居中，两侧多余的空白使用背景色填充。在前一例子中，所述屏幕像素级宽度为1366px，所述设计稿像素级宽度为945px，设计稿像素级宽度是小于屏幕像素级宽度的421px的，此时，为了网页画面的美观，我们将设计稿水平居中，设计稿检测多余的421px空白处使用背景色填充。
所述生成模块205，用于根据所述body中元素的优化后属性值生成优化页面。
具体地，网页浏览器得到优化网页的必要参数，即body中元素的优化后属性值，根据这些优化后的属性值进行调整后，可生成优化页面。与常规思路相比，本方案无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，具有更好的通用性。
通过上述程序模块201-205，本发明所提出的网页自适应布局系统200。首先，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；其次，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；再次，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；最后，根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
再次，基于本发明网页自适应布局系统200的上述第一实施例，提出本发明的第二实施例(如图4所示)。本实施例中，所述网页自适应布局系统200还包括切换模块206、缩放模块207，其中，
所述切换模块206，用于根据指令切换网页页面的页面模式。
具体地，不同的用户有不同的浏览习惯，网页页面支持不同的呈现方式能够进一步满足更广泛的用户阅读习惯，提高用户体验。在本案中，网页页面根据指令切换网页页面的页面模式，可切换初始页面和优化页面，在默认情况下，网页是自动呈现优化页面的，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所述优化页面。
所述切换模块206，还用于根据指令切换网页页面的场景模式。
具体地，在一些特殊的应用场景下，如老人作为互联网用户的特殊群体，其在浏览普通网页页面时，往往存在一定的视力障碍。在本案中，网页页面还可以根据指令切换网页页面的页面模式，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所述优化页面。例如，页面提供切换到老人模式的功能，并可根据用户需求调整页面的显示比例，如在适配计算公式中乘以一个比1大的系数，页面内容就会被相应地放大。例如，老人在浏览该页面时，默认显示的页面可能存在字体或者图片过小，老人无法看清的情况，此时老人可将页面选择为老人模式，或者在页面上通过特定的手势，根据自身的浏览需要调整页面的缩放大小。
所述缩放模块207，用于根据指令缩放页面或者页面内的指定内容。
具体地，在一些特定应用场景下，商家或者用户并不希望部分内容或者页面被缩放，此时，将该内容或者页面的单位从rem改为其他类型的单位，从而实现对任意指定页面或者内容不参与布局缩放。对于存在多个页面的网站，各个页面基于当前页面的设计稿进行适配计算，即各个页面计算其内容或者页面是否参与布局缩放，无需考虑自身与其他页面的设计差异。当接收到针对网页的缩放指令时，对网页所有内容进行缩放；当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。例如，某网页有10个页面，其中的2个页面需要按照特特定比例对其进行缩放，这时候仅需要对这两个页面的呈现比例进行调整即可；又例如某个页面的部分内容需要指定特定大小，此时仅需要指定这部分内容的显示比例即可。
通过上述程序模块206-207，本发明所提出的网页自适应布局系统100可以根据指令切换网页页面的页面模式，根据指令切换网页页面的场景模式，还可以根据指令缩放页面或者页面内的指定内容，使得网页的页面呈现模式具有可选择性，网页的场景模式更为丰富，具有更好的呈现效果和用户体验，是更为人性化的设计方案。
此外，本发明还提出一种网页自适应布局方法。
参阅图5所示，是本发明网页自适应布局方法第一实施例的流程示意图。在本实施例中，根据不同的需求，图5所示的流程图中的步骤的执行顺序可以改变，某些步骤可以省略。
步骤S301，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位。
具体地，目前业内主要采用内容区定宽布局+媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案对网页页面进行自适应调整，这些方案并不能完整地还原设计稿的尺寸比例。rem是css3的一个单位属性，rem能够使得body中元素的属性值根据页面的HTML中根元素字体大小进行转变的单位，定义好屏幕中根元素的字体大小能够实现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为CSS中元素width、height、margin、padding、left top属性的单位。
步骤S302，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整。
具体地，为了实现body中元素的属性值随着HTML根元素联动，还需要定义HTML元素的font-size值，而为了实现网页页面的大小自适应终端屏幕的大小，需要HTML中font-size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size值，从而调整所有DOM元素的对象及其属性、值，从而实现body中元素的属性值随font-size值同步调整。
步骤S303，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果。
具体地，不同的设计稿存在不同的宽度和高度，也就存在不同的宽高比，而呈现设计稿的终端屏幕由于使用场景，用户喜好等原因也存在不同的宽高比，例如早期用的较多的正方形屏幕以及现在较为流行的16:9屏，且存在尺寸差异和像素差异。设计稿在终端屏幕上是像素级的呈现方式，所述尺寸差异和像素差异导致同一终端屏幕难以很好的呈现不同的设计稿，同一设计稿难以在不同的终端屏幕上呈现。因此，考虑到实际屏幕尺寸比例和设计稿宽高比例不一致的情况，往往需要在所述初始设计稿呈现参数的基础上，设计稿的呈现尺寸进行进一步的优化，而优化工作的第一步需要获取设计稿宽高比和终端屏幕宽高比，具体步骤包括：获取所述设计稿的设计稿宽和设计稿高，然后根据设计稿宽除以设计稿高得到所述设计稿宽高比；获取所述终端屏幕的屏宽和屏高，然后根据屏宽除以屏高得到所述终端屏幕宽高比；最后对比所述设计稿宽高比和所述终端屏幕宽高比。
步骤S304，对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优化body元素的属性值，得到body中元素的优化后属性值。
具体地，从上文可知，为网页尺寸与屏幕相关，而屏幕的种类难以统计，许多设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。通过rem能够实现不同终端屏幕下网页呈现的自适应布局，这是一种通用的处理方式，尤其在字体的调整方面，但是这种自适应布局方式在部分情况下仍然不能完整地还原设计稿比例，存在设计稿被拉伸变形或者无法完整呈现的情况。通过对比设计稿宽高比和终端屏幕宽高比，得到设计稿宽高比和终端屏幕宽高比的大小情况。
在本发明的其他实施例中，当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度。
具体地，根据所述屏高和所述设计稿高计算出最小宽度，然后将所述最小宽度设置于HTML元素上，并设置横向滚动条。HTML为根元素，在HTML设置最小宽度能够同步影响其他元素的呈现尺寸，最终呈现一个经过优化调整后的设计稿，更好地还原设计稿。所述屏幕宽高比小于所述设计稿宽高比，例如方正显示屏，也就是在同一像素级高度的情况下，屏幕像素级宽度小于设计稿像素级宽度，此时，为了能够完整地还原设计稿，所述设计稿像素级高度与所述屏幕像素级高度一致，或者所述设计稿像素级高度与减去浏览器头部和底部像素级高度后剩余屏幕像素级高度一致，然后根据所述设计稿宽高比得到所述设计稿像素级宽度，将所述设计稿像素级宽度设置为所述最小宽度，设置于HTML元素上，而由于所述屏幕像素级宽度小于所述设计稿像素级宽度，屏幕是无法完整呈现所述设计稿宽度的，需要设置横向滚动条。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为1620px，高度为768px，在HTML元素设置最小宽度为1620px，并设置横向滚动条，此时就能够原比例还原设计稿。
当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
具体地，以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度，将所述实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将body元素水平居中，页面两侧空白处使用背景色填充。
详细而言，在本案中，当所述屏幕宽高比大于所述设计稿宽高比时，即屏幕太扁时，以所述像素级屏高乘以所述设计稿宽高比，得到像素级设计稿呈现宽度，并所述像素级设计稿呈现宽度赋值给body元素，同时计算新的font-size值＝当前值*(设计稿宽高比/屏幕宽高比)，并调整HTML元素的font-size值，即让所有元素在原有基础上再次缩小一定的比例。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为945px，高度为768px，所述像素级设计稿呈现宽度为＝所述像素级屏高乘以所述设计稿宽高比＝768px*945px/768px＝945px，将945px赋值给body元素。再例如，对于font-size值，假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*((945px/768px)/(1366px/768px))＝24px*945px/1366px＝17px，将该值赋值给font-size值，即实现其他所有元素的调整。
此外，在赋值给body元素的同时，将body元素水平居中，两侧多余的空白使用背景色填充。在前一例子中，所述屏幕像素级宽度为1366px，所述设计稿像素级宽度为945px，设计稿像素级宽度是小于屏幕像素级宽度的421px的，此时，为了网页画面的美观，我们将设计稿水平居中，设计稿检测多余的421px空白处使用背景色填充。
步骤S305，根据所述body中元素的优化后属性值生成优化页面。
具体地，前述步骤得到优化网页的必要参数，即body中元素的优化后属性值，根据这些优化后的属性值进行调整后，可生成优化页面。与常规思路相比，本方案无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，具有更好的通用性。
通过上述步骤S301-305，本发明所提出的网页自适应布局方法。首先，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；然后计算设计稿宽高比和终端屏幕宽高比；再次，对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优化body元素的属性值，得到元素的优化属性值；最后，根据所述优化设计稿呈现参数生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
再次，基于本发明网页自适应布局方法的上述第一实施例，提出本发明网页自适应布局方法的第二实施例。
如图6所示，是本发明网页自适应布局方法第二实施例的流程示意图。本实施例中，所述的网页自适应布局方法的步骤包括：
步骤S401，根据指令切换网页页面的页面模式。
具体地，不同的用户有不同的浏览习惯，网页页面支持不同的呈现方式能够进一步满足更广泛的用户阅读习惯，提高用户体验。在本案中，网页页面根据指令切换网页页面的页面模式，可切换初始页面和优化页面，在默认情况下，为了提高用户的视觉体验效果，网页是自动呈现优化页面的。
步骤S402，当接收到呈现初始页面的指令时，页面切换为所述初始页面。
具体地，当接收到呈现初始页面的指令时，首先判断当前页面是否处于所述优化页面，如是，则页面切换为所述初始页面，如否，则保持当前页面。
步骤S403，当接收到呈现优化页面的指令时，页面切换为所述优化页面。
具体地，当接收到呈现初始页面的指令时，首先判断当前页面是否处于所述优化页面，如是，则保持当前页面，如否，则页面切换为所述优化页面。
在本发明的其他实施例中，所述网页自适应布局方法，还可根据指令切换网页页面的场景模式。
具体地，在一些特殊的应用场景下，如老人作为互联网用户的特殊群体，其在浏览普通网页页面时，往往存在一定的视力障碍。在本案中，网页页面还可以根据指令切换网页页面的页面模式，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所述优化页面。例如，页面提供切换到老人模式的功能，并可根据用户需求调整页面的显示比例，如在适配计算公式中乘以一个比1大的系数，页面内容就会被相应地放大。例如，老人在浏览该页面时，默认显示的页面可能存在字体或者图片过小，老人无法看清的情况，此时老人可将页面选择为老人模式，或者在页面上通过特定的手势，根据自身的浏览需要调整页面的缩放大小。
在本发明的其他实施例中，所述网页自适应布局方法，还可根据指令缩放页面或者页面内的指定内容。
具体地，在一些特定应用场景下，商家或者用户并不希望部分内容或者页面被缩放，此时，将该内容或者页面的单位从rem改为其他类型的单位，从而实现对任意指定页面或者内容不参与布局缩放。对于存在多个页面的网站，各个页面基于当前页面的设计稿进行适配计算，即各个页面计算其内容或者页面是否参与布局缩放，无需考虑自身与其他页面的设计差异。当接收到针对网页的缩放指令时，对网页所有内容进行缩放；当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。例如，某网页有10个页面，其中的2个页面需要按照特特定比例对其进行缩放，这时候仅需要对这两个页面的呈现比例进行调整即可；又例如某个页面的部分内容需要指定特定大小，此时仅需要指定这部分内容的显示比例即可。
通过上述步骤S401-S403，本发明所提出的网页自适应布局方法，可以根据指令切换网页页面的页面模式，使得网页的页面呈现模式具有可选择性，具有更好的呈现效果和用户体验，是更为人性化的设计方案。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种网页自适应布局方法，其特征在于，所述方法包括：
将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；
当网页打开时，根据终端屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；
计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；
根据所述body中元素的优化后属性值生成优化页面。
2.如权利要求1所述的网页设计稿自适应布局方法，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：
获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；
获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；
对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果。
3.如权利要求1所述的网页设计稿自适应布局方法，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：
当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；
当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
4.如权利要求3所述的网页设计稿自适应布局方法，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：
根据所述屏高和所述设计稿高计算出最小宽度；
将所述最小宽度设置于HTML元素上；
设置横向滚动条。
5.如权利要求3所述的网页设计稿自适应布局方法，所述当屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素的步骤，具体包括如下步骤：
以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度；
将所述实际显示的设计稿宽度通过DOM树赋值于body元素；
计算并设置新的HTML元素font-size值；
将body元素水平居中，页面两侧空白处使用背景色填充。
6.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：
根据指令切换网页页面的页面模式；
当接收到呈现初始页面的指令时，页面切换为所述初始页面；
当接收到呈现优化页面的指令时，页面切换为所述优化页面。
7.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：
根据指令切换网页页面的场景模式；
当接收到进入特殊场景的指令时，页面切换为特殊场景模式；
当接收到进入普通场景的指令时，页面切换为普通场景模式。
8.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：
根据指令缩放页面或者页面内的指定内容；
当接收到针对网页的缩放指令时，对网页所有内容进行缩放；
当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。
9.一种服务器，其特征在于，所述电子装置包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的网页设计稿自适应布局系统，所述网页设计稿自适应布局系统被所述处理器执行时实现如权利要求1-8中任一项所述的网页设计稿自适应布局方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有网页设计稿自适应布局系统，所述网页设计稿自适应布局系统可被至少一个处理器执行，以使所述至少一个处理器执行如权利要求1-8中任一项所述网页设计稿自适应布局方法的步骤。
CN201910975459.6A 2019-10-11 2019-10-11 一种网页自适应布局方法、服务器及计算机可读存储介质 Active CN110837617B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201910975459.6A CN110837617B (zh) 2019-10-11 2019-10-11 一种网页自适应布局方法、服务器及计算机可读存储介质
PCT/CN2019/117347 WO2021068331A1 (zh) 2019-10-11 2019-11-12 一种网页自适应布局方法、服务器及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910975459.6A CN110837617B (zh) 2019-10-11 2019-10-11 一种网页自适应布局方法、服务器及计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN110837617A true CN110837617A (zh) 2020-02-25
CN110837617B CN110837617B (zh) 2024-05-07

Family

ID=69575351

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910975459.6A Active CN110837617B (zh) 2019-10-11 2019-10-11 一种网页自适应布局方法、服务器及计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN110837617B (zh)
WO (1) WO2021068331A1 (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111382388A (zh) * 2020-03-19 2020-07-07 中国银行股份有限公司 一种利用css进行底部元素吸底控制的方法及系统
CN111581570A (zh) * 2020-04-01 2020-08-25 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN111966434A (zh) * 2020-07-13 2020-11-20 北京明略软件系统有限公司 一种在窗口显示画面的方法、终端、系统和存储介质
CN112114924A (zh) * 2020-09-24 2020-12-22 北京明略昭辉科技有限公司 一种页面元素的权限选择方法及装置
CN112149021A (zh) * 2020-09-23 2020-12-29 四川天邑康和通信股份有限公司 一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法
CN112261227A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种移动端多屏等比例适配的方法
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112416331A (zh) * 2020-12-07 2021-02-26 建信金融科技有限责任公司 页面的适配方法、装置、电子设备及计算机可读存储介质
CN112783496A (zh) * 2021-02-22 2021-05-11 中国工商银行股份有限公司 一种基于锚点的界面动态布局方法、装置、电子设备及存储介质
CN112860255A (zh) * 2021-02-08 2021-05-28 无线生活（杭州）信息科技有限公司 页面适配方法及装置
CN113050944A (zh) * 2021-04-21 2021-06-29 山东浪潮通软信息科技有限公司 前端页面生成方法、装置及计算机可读介质
CN113268226A (zh) * 2021-06-24 2021-08-17 中国平安人寿保险股份有限公司 页面数据生成方法、装置、存储介质及设备
CN113407878A (zh) * 2021-08-18 2021-09-17 深圳市明源云客电子商务有限公司 页面适配方法、显示终端及可读存储介质
CN113934339A (zh) * 2021-09-14 2022-01-14 南方电网深圳数字电网研究院有限公司 一种基于rem的页面自适应布局的方法及装置
CN114237789A (zh) * 2021-11-24 2022-03-25 浙江大学 一种基于uni-app的满足适老化的自适应框架及使用方法
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN115033335A (zh) * 2022-08-11 2022-09-09 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法
CN116501435A (zh) * 2023-06-28 2023-07-28 北京尽微致广信息技术有限公司 一种布局处理方法、装置及计算机存储介质
CN116680034A (zh) * 2023-08-02 2023-09-01 山东依鲁光电科技有限公司 一种led异步显示屏自适应群发实现方法

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113886744B (zh) * 2021-12-08 2022-05-06 浙江口碑网络技术有限公司 内容渲染方法、装置、电子设备及存储介质
CN114201257A (zh) * 2021-12-10 2022-03-18 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备、存储介质和程序产品
CN114816182A (zh) * 2022-03-21 2022-07-29 昭通亮风台信息科技有限公司 可视化屏幕的地图展示方法、装置、设备及介质
CN115080027B (zh) * 2022-08-24 2023-01-06 深圳市信润富联数字科技有限公司 web页面自动适配方法、装置、设备及存储介质
CN116578219B (zh) * 2023-04-28 2024-06-14 北京洞悉网络有限公司 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001096985A2 (en) * 2000-06-12 2001-12-20 Softsource, Inc. Resolution independent vector display of internet content
US20040255244A1 (en) * 2003-04-07 2004-12-16 Aaron Filner Single column layout for content pages
CN102057369A (zh) * 2008-04-15 2011-05-11 Opera软件股份公司 用于当显示电子文档的选定区域时动态地文本换行的方法和设备
US20130305145A1 (en) * 2012-05-09 2013-11-14 Ni Group Limited A Method of Publishing Digital Content
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质
CN109683895A (zh) * 2018-12-21 2019-04-26 上海哔哩哔哩科技有限公司 基于css预处理器的网页适配多种浏览器尺寸的方法及系统

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
GB2418509A (en) * 2003-06-03 2006-03-29 Forbes Holton Norris Iii Flexible, dynamic menu-based web-page architecture
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术（北京）有限公司 一种网页自适应布局方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103530079A (zh) * 2013-09-30 2014-01-22 山西云途信息技术有限公司 一种适配不同分辨率的移动终端的图片显示方法及装置
CN107797801A (zh) * 2017-10-20 2018-03-13 江苏电力信息技术有限公司 一种基于多种移动终端界面的适配方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001096985A2 (en) * 2000-06-12 2001-12-20 Softsource, Inc. Resolution independent vector display of internet content
US20040255244A1 (en) * 2003-04-07 2004-12-16 Aaron Filner Single column layout for content pages
CN102057369A (zh) * 2008-04-15 2011-05-11 Opera软件股份公司 用于当显示电子文档的选定区域时动态地文本换行的方法和设备
US20130305145A1 (en) * 2012-05-09 2013-11-14 Ni Group Limited A Method of Publishing Digital Content
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质
CN109683895A (zh) * 2018-12-21 2019-04-26 上海哔哩哔哩科技有限公司 基于css预处理器的网页适配多种浏览器尺寸的方法及系统

Cited By (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111382388A (zh) * 2020-03-19 2020-07-07 中国银行股份有限公司 一种利用css进行底部元素吸底控制的方法及系统
CN111382388B (zh) * 2020-03-19 2023-10-24 中国银行股份有限公司 一种利用css进行底部元素吸底控制的方法及系统
CN111581570A (zh) * 2020-04-01 2020-08-25 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN111581570B (zh) * 2020-04-01 2023-05-30 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN111966434A (zh) * 2020-07-13 2020-11-20 北京明略软件系统有限公司 一种在窗口显示画面的方法、终端、系统和存储介质
CN112149021A (zh) * 2020-09-23 2020-12-29 四川天邑康和通信股份有限公司 一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法
CN112114924A (zh) * 2020-09-24 2020-12-22 北京明略昭辉科技有限公司 一种页面元素的权限选择方法及装置
CN112261227A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种移动端多屏等比例适配的方法
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112416331A (zh) * 2020-12-07 2021-02-26 建信金融科技有限责任公司 页面的适配方法、装置、电子设备及计算机可读存储介质
CN112860255A (zh) * 2021-02-08 2021-05-28 无线生活（杭州）信息科技有限公司 页面适配方法及装置
CN112783496A (zh) * 2021-02-22 2021-05-11 中国工商银行股份有限公司 一种基于锚点的界面动态布局方法、装置、电子设备及存储介质
CN113050944A (zh) * 2021-04-21 2021-06-29 山东浪潮通软信息科技有限公司 前端页面生成方法、装置及计算机可读介质
CN113050944B (zh) * 2021-04-21 2024-01-26 浪潮通用软件有限公司 前端页面生成方法、装置及计算机可读介质
CN113268226A (zh) * 2021-06-24 2021-08-17 中国平安人寿保险股份有限公司 页面数据生成方法、装置、存储介质及设备
CN113407878A (zh) * 2021-08-18 2021-09-17 深圳市明源云客电子商务有限公司 页面适配方法、显示终端及可读存储介质
CN113407878B (zh) * 2021-08-18 2022-02-08 深圳市明源云客电子商务有限公司 页面适配方法、显示终端及可读存储介质
CN113934339A (zh) * 2021-09-14 2022-01-14 南方电网深圳数字电网研究院有限公司 一种基于rem的页面自适应布局的方法及装置
CN114237789A (zh) * 2021-11-24 2022-03-25 浙江大学 一种基于uni-app的满足适老化的自适应框架及使用方法
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN114296674B (zh) * 2021-12-30 2024-03-12 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN115033335A (zh) * 2022-08-11 2022-09-09 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法
CN115033335B (zh) * 2022-08-11 2023-01-10 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法
CN116501435A (zh) * 2023-06-28 2023-07-28 北京尽微致广信息技术有限公司 一种布局处理方法、装置及计算机存储介质
CN116501435B (zh) * 2023-06-28 2023-09-12 北京尽微致广信息技术有限公司 一种布局处理方法、装置及计算机存储介质
CN116680034A (zh) * 2023-08-02 2023-09-01 山东依鲁光电科技有限公司 一种led异步显示屏自适应群发实现方法
CN116680034B (zh) * 2023-08-02 2023-10-27 山东依鲁光电科技有限公司 一种led异步显示屏自适应群发实现方法

Also Published As

Publication number Publication date
WO2021068331A1 (zh) 2021-04-15
CN110837617B (zh) 2024-05-07

Similar Documents

Publication Publication Date Title
CN110837617B (zh) 一种网页自适应布局方法、服务器及计算机可读存储介质
CN111984351B (zh) 页面适配方法、电子设备、计算机可读存储介质
US20220137796A1 (en) Screen adaptation and displaying method, electronic device and computer storage medium
US7412647B2 (en) Method and system for laying out paginated content for viewing
JP5967614B2 (ja) ウェブページを表示する方法、装置およびシステム
JP5324411B2 (ja) 広告配信装置、方法及びプログラム
US7944456B2 (en) Content optimization for receiving terminals
US10339209B2 (en) Webpage display method and device
US11112927B2 (en) Digital content automated layout system
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN103678622A (zh) 瀑布流式图片动态呈现的方法及装置
CN113010252B (zh) 应用页面的展示方法、电子设备及存储介质
CN115237522A (zh) 页面自适应展示方法及装置
CN111309671A (zh) 一种web报表导出PDF的方法、装置及存储介质
CN114579223A (zh) 一种界面布局方法、电子设备和计算机可读存储介质
CN105389308B (zh) 网页的显示处理方法及装置
JP6339550B2 (ja) 端末用プログラム、端末装置及び端末制御方法
CN110688037A (zh) 一种控件的显示方法、存储介质及移动终端
CN112434487B (zh) 一种图文排版方法、装置及电子设备
CN113656020A (zh) 一种基于ReactNative的图片展示组件开发方法及相关组件
US8156181B2 (en) Communication apparatus and storage medium storing program
CN109032476B (zh) 一种在图形用户界面中显示大数据集的方法
CN112416503A (zh) 小程序图标显示方法、装置、设备与计算机可读存储介质
CN112286603A (zh) 一种表格展示方法、装置、电子设备及存储介质
CN112261227A (zh) 一种移动端多屏等比例适配的方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant