CN105740315B - 一种多种屏幕响应式网页布局调整的方法 - Google Patents

一种多种屏幕响应式网页布局调整的方法 Download PDF

Info

Publication number
CN105740315B
CN105740315B CN201511027095.7A CN201511027095A CN105740315B CN 105740315 B CN105740315 B CN 105740315B CN 201511027095 A CN201511027095 A CN 201511027095A CN 105740315 B CN105740315 B CN 105740315B
Authority
CN
China
Prior art keywords
grid
width
row
layout
page
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.)
Active
Application number
CN201511027095.7A
Other languages
English (en)
Other versions
CN105740315A (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.)
Nanjing focus leading Cloud Computing Technology Co., Ltd.
Original Assignee
Nanjing Focus Leading Cloud Computing Technology 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 Nanjing Focus Leading Cloud Computing Technology Co Ltd filed Critical Nanjing Focus Leading Cloud Computing Technology Co Ltd
Priority to CN201511027095.7A priority Critical patent/CN105740315B/zh
Publication of CN105740315A publication Critical patent/CN105740315A/zh
Application granted granted Critical
Publication of CN105740315B publication Critical patent/CN105740315B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/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
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • 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

Abstract

一种多种屏幕响应式网页布局调整的方法，具体包括多屏幕自适应的方法和个性化页面布局调整的方法；所述多屏幕自适应的方法，通过根据屏幕大小自动调节网页内容宽度，保证网页内容与屏幕能匹配，同时网页页面内各部分内容能随页面宽度的变化自适应变化自身大小；所述个性化页面调整方法，网页布局结构以Bootstrap的12栅格系统为基础，实现栅格排列，采用jQuery UI提供的拖拽放置，实现通过鼠标的拖放完成在网页页面内的功能组件布局；通过响应式页面内容宽度的变换规则，网页内容显示区域宽度随终端设备显示屏大小做适应性改变，提出响应式页面内容宽度的变化规则。

Description

一种多种屏幕响应式网页布局调整的方法
技术领域
本发明属于互联网网页设计技术领域，涉及个性化响应式网站页面的构建和制作，具体为一种多种屏幕响应式网页布局调整的方法。
背景技术
在传统的网站开发流程中，网页布局的实现通常由经验丰富的前端开发工程师负责。在此方式中，前端开发工程师的人力成本较高，实现所有网站页面的个性化布局需要的时间较长，一般不适用于有互联网建站需求但没有网络技术部门的企业。
众多互联网建站企业提供Web端网站开发工具，如凡科建站、建站之星等，用于制作企事业或个人网站。但诸如此类的建站工具虽然提供多套网页模板，但依然无法提供快速的个性化响应式网页布局解决方法。
Web设计中普遍使用固定宽度(如960像素)为所有终端用户提供一致的用户界面，在显示屏分辨率趋于一致时显示很好，但在大尺寸高分辨率显示器上会显示高达50％空白区域，而在移动终端上页面大小不能匹配终端屏幕大小，页面布局不能适应性调整，无法按照100％比例显示页面宽度，出现水平滚动条，寻求标准分辨率显得特别困难。针对多终端设备的屏幕尺寸差异，少数网站已经寻求新的解决方法，根据用户显示屏分辨率定制多个版本，以提供最佳用户浏览体验。此种方案虽然保证了显示效果，但是增加了开发者的开发难度，同时要维护多个版本，而且如果一个网站有多个入口，则会大大增加网站架构设计的复杂度。
响应式布局是Ethan Marcotte在2010年5月提出的一个概念，简而言之，就是一个网站能兼容多个终端，而不是为每一个终端做一个特定的版本。广大用户的电脑中高性能的Chrome、Firefox、Safari、360等浏览器现已经普及，加之jQuery团队推出的jQuery-UI交互框架，这些都成为实现个性化响应式网站布局的基本条件。
网页布局的调整通常考虑两种方案，其一是建站工具提供多套多样式的布局结构，用户可根据实际的网页内容选择合适的布局框架；其二是建站工具提供网页布局框架的编辑功能，用户可按需修改并保存成新的布局框架。上述两种方案虽然能解决用户的网页框架的设计需求，但较难符合用户个性化网页设计制作的需求，加之操作过程较为冗余复杂，增加了使用难度。因而，当前不仅迫切需要一种能够适应多分辨率终端的建站方式，又能实现“任意拖放、所见即所得、个性化设计、方便操作”的网页布局方法。
发明内容
为解决上述问题，本发明目的是，提供一种多种屏幕响应式网页布局调整的方法，通过自定义响应式页面宽度变换规则，基于Bootstrap的12栅格系统，并利用组件组合的形式，实现集合“液态式布局”和“积木式布局”两大建站优势的网站布局调整方法，保证网站页面制作便捷性的同时也满足个性化设计需求。
所述“液态式布局”，在网页显示的区域内，布局中的(布局)列以百分比宽度排列；所述“积木式布局”，是指网页内容均由功能组件构成，不同的页面内容通过各类功能组件组合来实现，使网站制作过程类似搭建积木。各类功能组件通过“JAVA+HTML+CSS+JavaScript+FreeMarker”开发形成，用于承载网页内容，具备展示多样化图片、文字、视频的功能。CSS指层叠样式表，一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)文件样式的计算机语言。
本发明的技术方案是，一种多种屏幕响应式网页布局调整的方法，具体包括多屏幕、多终端自适应的方法和个性化页面布局调整的方法；
所述多屏幕自适应的方法，根据屏幕大小自动调节网页内容宽度，保证网页内容与屏幕能准确匹配，同时网页页面内各部分内容可随页面宽度的变化自适应变化自身大小。
首先，通过响应式页面内容宽度的变换规则，网页内容显示区域宽度随终端设备显示屏大小做适应性改变，响应式页面内容宽度的变换规则如下：
(1)“屏幕分辨率>0px且屏幕分辨率<768px”为手机端，页面内容宽度＝浏览器界面宽度；
(2)“屏幕分辨率>＝768px且屏幕分辨率<990px”为平板电脑竖屏，页面内容定宽750像素；
(3)“屏幕分辨率>＝990px且屏幕分辨率<1290px”为笔记本，页面内容定宽980像素；
(4)“屏幕分辨率>＝1290px，”为大屏电脑，页面内容定宽1200像素；
其次，网页布局结构以Bootstrap的12栅格系统为基础，实现栅格排列。网页布局以“行”作为划分单位，每一行以“栅格”作为划分单位，功能组件放置在各栅格中；每一行的布局结构实质由多个单元栅格组成；
所述单元栅格是组成网页页面中行布局的最小单位，类似于表格中的单元格，Bootstrap的12栅格系统允许每一行的单元栅格数目不超过12个，且单元栅格宽度并非固定数值，而是以百分比的形式表示，以保证当页面宽度发生变化时，单元栅格宽度也会自适应发生改变。
不同单元栅格对应的页面百分占比具体如下
(1)若一个行由1个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为100％；
(2)若一个行由2个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为16.6％；
(3)若一个行由3个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为25％；
(4)若一个行由4个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为33.3％；
(5)若一个行由5个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为41.6％；
(6)若一个行由6个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为50％；
(7)若一个行由7个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为58.3％；
(8)若一个行由8个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为66.6％；
(9)若一个行由9个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为75％；
(10)若一个行由10个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为83.3％；
(11)若一个行由11个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为91.6％；
(12)若一个行由12个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为100％；
基于网页内容宽度变换规则，浏览器在请求访问网站时，首先会找到HTML文件中的<meta name＝”viewport”content＝”width＝device–width,initial–scale＝1,user–scalable＝no”>标记，并计算出当前访问网站的终端设备的显示尺寸，然后根据对比CSS文件中网页内容宽度变换规则，在终端设备上呈现合适终端显示屏幕的网页内容宽度；相应地，基于栅格宽度占比，网页内容元素的尺寸大小也会依据网页内容宽度自适应变化。
本发明方法的实现不仅限于网页请求过程中布局的自动变化，同时在网页制作过程中，也能切换成不同分辨率下的布局显示模式；
终端设备包括手机、平板电脑、笔记本、大显示屏电脑，网页元素大小和布局能针对设备做出改变。
所述个性化页面布局调整的方法，基于Boostrap的12栅格系统，优化jQuery UI提供的拖拽放置方法，实现通过鼠标的拖放完成在网页页面内的功能组件布局，具体步骤包括：
步骤1：主题选择
针对没有个性布局需求的网页页面，可从主题网站案例库中选取调用，所有主题网站按照语言版本、所属行业、网站颜色属性进行分类，并存入主题网站案例库中。
所提供的网站案例中包含首页、产品、文章、关于我们、联系我们等采用不同布局的网页及其基本的网站样例数据，包括样例图片、介绍性文字、幻灯图片、产品的样例数据；
每一个网站案例都是一个完整的网站布局，用户可以直接将之发布上线使用。各功能组件以栅格作为承载体，根据个性化需要，也能对案例中功能组件和网页页面布局实施修改；
步骤2：构建页面结构布局
基于Boostrap的12栅格系统，创建虚拟标记，包括虚拟行、外部行、嵌套行、虚拟列，主要将他们用于构建复杂的网页布局。当有鼠标光标经过当前布局行或栅格位置时，虚拟标记会自动显示以做放置位置提示。
所述虚拟行，指位于某一栅格内各组件上下位置的放置标记，放置在此处的组件合并入该栅格中，网页布局不发生变化，即当前行的列数不发生变化；
所述嵌套行，指位于某一栅格外部上下位置的放置标记，在此处放置组件时，自动创建一个嵌套行和一个栅格，形成一个嵌套布局页面，但不影响网页整体布局。新建的栅格实质由12个单元栅格组成，新建栅格的宽度与所参照栅格的宽度一致。
嵌套行可形成多级的、不限制层数的嵌套布局页面，嵌套布局界面嵌入全局页面中，在不影响全局排列的情况下，丰富布局设计。
所述虚拟列，指位于某一栅格外部左右位置的放置标记，当组件放置此处时，当前栅格所属布局页面中新增一个栅格，新增栅格和当前布局页面内其他栅格的构成形式默认如下：
(1)若新增栅格和原有栅格总计2列时，2个栅格均由6个单元栅格组成；
(2)若新增栅格和原有栅格总计3列时，3个栅格均由4个单元栅格组成；
(3)若新增栅格和原有栅格总计4列时，4个栅格均由3个单元栅格组成；
(4)若新增栅格和原有栅格总计5列时，其中4个栅格由2个单元栅格组成，其余1个栅格由1个单元栅格组成；
(5)若新增栅格和原有栅格总计6列时，6个栅格均有2个单元栅格组成；
(6)若新增栅格和原有栅格总计7列时，其中6个栅格均由1个单元栅格组成，其余1个栅格由6个单元栅格组成；
(7)若新增栅格和原有栅格总计8列时，其中7个栅格均由1个单元栅格组成，其余1个栅格由5个单元栅格组成；
(8)若新增栅格和原有栅格总计9列时，其中8个栅格均由1个单元栅格组成，其余1个栅格由4个单元栅格组成；
(9)若新增栅格和原有栅格总计10列时，其中9个栅格均由1个单元栅格组成，其余1个栅格由3个单元栅格组成；
(10)若新增栅格和原有栅格总计11列时，其中10个栅格均由1个单元栅格组成，其余1个栅格由2个单元栅格组成；
(11)若新增栅格和原有栅格总计12列时，每一个栅格均由1个单元栅格组成，此情况下不可新增栅格，但依然可以根据提示位置添加嵌套行和外部行；
所述外部行，指位于网页页面上每一个行的上下位置的放置标记。网页整体布局以“行”作为划分单位，在行的外部行标记处放置组件时，自动创建一个行即新建行和一个宽度为100％的栅格，相应的，新建行的上下位置形成新的外部行，新建栅格的上下及左右位置形成新的虚拟列、虚拟行和嵌套行，网页布局因布局内行数变化发生改变；新建行可通过添加组件，将栅格划分多个部分，形成一行多列的布局。
通过布局“虚拟行”、“虚拟列”、“嵌套行”、“外部行”，实现在一个行内布局多级嵌套页面，有助于构建复杂的网页页面布局；
虚拟行和虚拟列紧贴栅格，嵌套行在虚拟行外部，外部行在嵌套行外部，一个外部行内可以包含多个嵌套行，一个嵌套行可以包括多个虚拟行。
步骤3：组件的添加和修改
在构建完毕的网站布局结构中，组件操作通过鼠标的拖拽、拖放和点击实现。基于jQuery UI提供的拖拽放置方法，封装组件添加和拖拽的通用规则、组件删除操作、列宽改变的方法。
所述组件添加的方法，指利用鼠标从组件库中选取组件，并利用简单的鼠标拖拽操作，将组件拖放至预放的位置，组件添加的步骤具体包括：
步骤3-1：选择组件
从组件库中选择组件，鼠标点击选中，鼠标拖拽移动组件；
步骤3-2：位置判断，包括上下位置和左右位置的判断；
(1)上下位置判断：根据鼠标光标在某一栅格的上下位置，判断新组件的摆放位置：其一是并入该栅格，其二是自动创建嵌套行或外部行放置该组件；
不管是并入栅格还是创建嵌套行，新增的组件不会引起网页页面的布局发生变化，即网页的行数和列数均不发生变更；
若是创建外部行，网页页面新增一行，新增组件置于新建的行中；
(2)左右位置判断：
根据鼠标光标在某一栅格的左右位置，判别新组件的摆放位置：其一是合并入当前栅格的列中，其二是在当前栅格的左右两边新建栅格放置该组件；
若是合并当前栅格的列中，新增的组件不会引起栅格所属行的列数发生变化，栅格宽度不变，栅格内原有组件的宽度缩小；
若是创建新栅格，该栅格所属行的列数增加一个；
步骤3-3：按照设计需要调整栅格宽度
当行中只有一个栅格时，即该行只有一列，栅格占满布局行的显示区域，栅格宽度等于布局行宽度，宽度固定，栅格不支持调整；
当行中的栅格数大于“1”时，相邻两个栅格的交接处存在宽度调节工具，鼠标放置在两个栅格交接处时，宽度调节工具自动显示；
鼠标点击宽度调节工具，左右拖拽可改变栅格宽度，宽度变化单位为一个栅格宽度，宽度的调整不会影响当前行的栅格个数，宽度变化范围为：
(1)增加范围：一个单元栅格宽度<宽度增加值<布局界面内11个单元栅格宽度-预扩大的栅格变化前的宽度；
(2)缩小范围：一个单元栅格宽度<宽度缩小值<预缩小的栅格变化前的宽度-1个单元栅格的宽度；
组件删除的同时也会删除相应的栅格，删除的具体步骤包括：
步骤3-4：选中预删除的组件；
步骤3-5：组件上自动显示“删除”标记，鼠标点击该标记；
步骤3-6：根据栅格数目及其内含的组件数目，执行不同的删除的操作；
步骤3-6-1：若一行中只有一个栅格，且栅格中含有一个组件，删除组件即删除当前行；
步骤3-6-2：若一行中有多个栅格，且预删除组件所在的栅格内存在多个组件，删除组件不导致网页页面布局改变，网页的行、列数不减少；
步骤3-6-3：若一行中有多个栅格，且预删除组件所在栅格内只存在一个组件，删除组件即删除相应的栅格；
本发明和现有技术相比，其有益效果在于：
(1)本发明通过显示分辨率判别终端设备，并设定相应分辨率范围下的响应式页面内宽度的变换规则，以实现自适应根据终端设备调节终端上所显示的网站内容区域宽度；结合Bootstrap的12栅格系统，将网页布局以栅格排列，栅格宽度以百分比形式设定，使各栅格宽度能依据网站内容区域宽度自动发生变化，保证网页元素大小和布局能针对终端设备做出改变，使一个网站能很好地适应于多种分辨率的终端设备，大大减少网站建设、布局及维护的成本；
(2)本发明基于Bootstrap的12栅格系统，在每一个栅格周围设置虚拟标记，包括虚拟行、虚拟列、嵌套行、外部行，使网站建设过程中更容易地构建复杂的网页页面，减少以往网页布局过程中繁杂的代码操作，帮助没有网站编制专业知识和经验的工作者也能轻易地构建满足个性化需求的网页页面；
(3)本发明以jQuery-UI为基础，创建添加组件、拖拽组件等规则，使对组件的操作、栅格宽度的改变只需依靠鼠标的点击、拖放及拖拽完成，不需要进行前端代码的修改，实现布局页面的快速调整。
附图说明
图1为本发明实施例中本发明实施例中网页布局框架结构示意图；
图2为本发明实施例中主题案例库的示意图；
图3为本发明实施例中虚拟标记位置的示意图；
图4为本发明实施例中多级嵌套页面的示意图；
图5为本发明实施例中宽度调整工具的示意图；
图6为本发明实施例中不同布局内组件删除效果的示意图。
具体实施例
为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明
一种多种屏幕响应式网页布局调整的方法，通过自定义响应式页面宽度变换规则，基于Bootstrap的12栅格系统，并利用组件组合的形式，实现集合“液态式布局”和“积木式布局”两大建站优势的网站布局调整方法，保证网站页面制作便捷性的同时也满足个性化设计需求。
所述“液态式布局”，在网页显示的区域内，布局中的布局列以百分比宽度排列。例如当前布局列中有两列，列1与列2的宽度为显示区域宽度的50％；或当前布局中有四列，列1、列2、列3与列4的宽度为显示区域宽度的25％。
所述“积木式布局”，是指网页内容均由功能组件构成，不同的页面内容通过各类功能组件组合来实现，使网站制作过程类似搭建积木。组件是通过“JAVA+HTML+CSS+JavaScript+FreeMarker”开发形成，用于承载网页内容，具备展示多样化图片、文字、视频的功能。比如网页布局中的文字添加通过使用文字组件实现；网页布局中的图片添加通过使用图片组件实现；这样的网站制作形式类似搭建积木。
一种多种屏幕响应式网页布局调整的方法，具体包括多屏幕、多终端自适应的方法和个性化页面布局调整的方法；
本发明实施例中多屏幕自适应方法的流程，通过根据屏幕大小自动调节网页内容宽度，保证网页内容与屏幕能准确匹配，同时网页页面内各部分内容可随页面宽度的变化自适应变化大小。
步骤101，通过响应式页面内容宽度的变换规则，网页内容显示区域宽度随终端设备显示屏大小做适应性改变，响应式页面内容宽度的变换规则如下：
(1)“屏幕分辨率>0px且屏幕分辨率<768px”为手机端，页面内容宽度＝浏览器界面宽度；
(2)“屏幕分辨率>＝768px且屏幕分辨率<990px”为平板电脑竖屏，页面内容定宽750像素；
(3)“屏幕分辨率>＝990px且屏幕分辨率<1290px”为笔记本，页面内容定宽980像素；
(4)“屏幕分辨率>＝1290px，”为大屏电脑，页面内容定宽1200像素；
步骤102，网页布局结构以Bootstrap的12栅格系统为基础，实现栅格排列。网页布局以“行”作为划分单位，每一行以“栅格”作为划分单位，功能组件放置在各栅格中；每一行的布局结构实质由多个单元栅格组成；所述单元栅格是组成网页页面中行布局的最小单位，类似于表格中的单元格，Bootstrap的12栅格系统允许每一行的单元栅格数目不超过12个，且单元栅格宽度并非固定数值，而是以百分比的形式表示，以保证当页面宽度发生变化时，单元栅格宽度也会自适应发生改变。
不同单元栅格对应的页面百分占比具体如下
(1)若一个行由1个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为100％；
(2)若一个行由2个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为16.6％；
(3)若一个行由3个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为25％；
(4)若一个行由4个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为33.3％；
(5)若一个行由5个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为41.6％；
(6)若一个行由6个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为50％；
(7)若一个行由7个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为58.3％；
(8)若一个行由8个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为66.6％；
(9)若一个行由9个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为75％；
(10)若一个行由10个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为83.3％；
(11)若一个行由11个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为91.6％；
(12)若一个行由12个单元栅格合并组成，则该栅格宽度占页面内容宽度的比例为100％；
基于网页内容宽度变换规则，浏览器在请求访问网站时，首先会找到HTML文件中的<meta name＝”viewport”content＝”width＝device–width,initial–scale＝1,user–scalable＝no”>标记，并计算出当前访问网站的终端设备的显示尺寸，然后根据对比CSS文件中网页内容宽度变换规则，在终端设备上呈现合适终端显示屏幕的网页内容宽度；相应地，基于栅格宽度占比，网页内容元素的尺寸大小也会依据网页内容宽度自适应变化；
本方法的实现不仅限于网页请求过程中布局的自动变化，同时在网页制作过程中，也可以切换成不同分辨率下的布局显示模式；
终端设备包括手机、平板电脑、笔记本、大显示屏电脑，网页元素大小和布局能针对设备做出改变。
例如ThinkPad电脑显示分辨率为1366像素，根据网页内容宽度变化规则所述，该终端设备为大屏幕电脑，网页页面内容固定宽度，为1200像素。若该网页第一行中是两列布局，即两个栅格，每一个栅格由6个单元栅格组成，按照栅格占比规则，每一个栅格的宽度＝1200*50％＝600像素；同理，该网页第二行有四列，即四个栅格A1、A2、A3、A4，四个栅格涵盖的单元格依次为8,1,2,1，按照栅格占比规则：
A1栅格宽度＝1200*66.6667％＝800.4像素；
A2栅格宽度＝1200*8.3％＝99.6像素；
A3栅格宽度＝1200*16.7＝200.4像素；
A4栅格宽度＝1200*8.3＝99.6像素；
col-md-1中的数字代表改栅格包含的单元栅格数目。全局由四行划分而成，每一行以栅格划分多列，第一行分成12列，每一列占一个栅格，第二行分成2列，其中一列占8个单元栅格，另一列占4个单元栅格，第三行分成3列，每一列均占4个单元栅格。
图1为本发明实施例中个性化页面布局调整方法的流程图，基于Boostrap的12栅格系统，优化jQuery UI提供的拖拽放置方法，实现通过鼠标的拖放完成在网页页面内的功能组件布局，具体步骤包括：
步骤301：主题选择
针对没有个性设计需求的网页页面布局，通过从主题网站案例库中选取调用至前端布局；所有主题网站按照语言版本、所属行业、网站颜色属性进行分类，并存入主题网站案例库中。所有网站案例中均包含首页、产品、文章、关于我们、联系我们等采用不同布局的网页及其基本的网站样例数据，包括样例图片、介绍性文字、幻灯图片、产品的样例数据等，主题案例库参阅图2所示
每一个网站案例都是一个完整的网站布局，用户可以直接将之发布上线使用。各功能组件以栅格作为承载体，根据个性化需要，也能对案例中功能组件和网页页面布局实施修改；
步骤302：构建页面结构布局
基于Boostrap的12栅格系统，创建虚拟标记，包括501外部行、502虚拟列、503虚拟行、504嵌套行，主要将他们用于构建复杂的网页布局。当有鼠标光标经过当前布局行或栅格位置时，虚拟标记会自动显示以做放置位置提示。
四个虚拟标记在页面内的结构如图3所示，虚拟行503和虚拟列502紧贴栅格，嵌套行504在虚拟行503外部，外部行501在嵌套行504的外部，一个外部行501内可以包含多个嵌套行504，一个嵌套行504可以包括多个虚拟行503。
所述外部行501，指位于网页页面上每一个行的上下位置的放置标记。网页整体布局以“行”作为划分单位，在行的外部行标记处放置组件时，自动创建一个行即新建行和一个宽度为100％的栅格，相应的，新建行的上下位置形成新的外部行501，新建栅格的上下及左右位置形成新的虚拟列502、虚拟行503和嵌套行504，网页布局因布局内行数变化发生改变；新建行可通过添加组件，将栅格划分多个部分，形成一行多列的布局。
所述虚拟列502，指位于某一栅格外部左右位置的放置标记，当组件放置此处时，当前栅格所属布局页面中新增一个栅格，新增栅格和当前布局页面内其他栅格的构成形式默认如下：
(1)若新增栅格和原有栅格总计2列时，2个栅格均由6个单元栅格组成；
(2)若新增栅格和原有栅格总计3列时，3个栅格均由4个单元栅格组成；
(3)若新增栅格和原有栅格总计4列时，4个栅格均由3个单元栅格组成；
(4)若新增栅格和原有栅格总计5列时，其中4个栅格由2个单元栅格组成，其余1个栅格由1个单元栅格组成；
(5)若新增栅格和原有栅格总计6列时，6个栅格均有2个单元栅格组成；
(6)若新增栅格和原有栅格总计7列时，其中6个栅格均由1个单元栅格组成，其余1个栅格由6个单元栅格组成；
(7)若新增栅格和原有栅格总计8列时，其中7个栅格均由1个单元栅格组成，其余1个栅格由5个单元栅格组成；
(8)若新增栅格和原有栅格总计9列时，其中8个栅格均由1个单元栅格组成，其余1个栅格由4个单元栅格组成；
(9)若新增栅格和原有栅格总计10列时，其中9个栅格均由1个单元栅格组成，其余1个栅格由3个单元栅格组成；
(10)若新增栅格和原有栅格总计11列时，其中10个栅格均由1个单元栅格组成，其余1个栅格由2个单元栅格组成；
(11)若新增栅格和原有栅格总计12列时，每一个栅格均由1个单元栅格组成；此时，不可新增栅格，但依然可以根据提示位置添加嵌套行和外部行；
所述虚拟行503，指位于某一栅格内各组件上下位置的放置标记，放置在此处的组件合并入该栅格中，网页布局不发生变化，即当前行的列数不发生变化；
所述嵌套行504，指位于某一栅格外部上下位置的放置标记，在此处放置组件时，自动创建一个嵌套行和一个栅格，形成一个嵌套布局页面，但不影响网页整体布局。新建的栅格实质由12个单元栅格组成，新建栅格的宽度与所参照栅格的宽度一致。
嵌套行可形成多级的、不限制层数的嵌套布局页面，如图4所示，嵌套布局界面嵌入全局页面中，在不影响全局排列的情况下，丰富布局设计，
通过布局“虚拟行503”、“虚拟列502”、“嵌套行504”、“外部行501”，实现在一个行内布局多级嵌套页面，有助于构建复杂的网页页面布局；
步骤303：组件的添加和修改
利用鼠标从组件库中选取组件，并利用简单的鼠标拖拽操作，将组件拖放至预放的位置，组件添加的步骤具体包括：
步骤303-1：选择组件
从组件库中选择组件，鼠标点击选中，鼠标拖拽移动组件；
步骤303-2：位置判断，包括上下位置和左右位置的判断；
(1)上下位置判断：根据鼠标光标在某一栅格的上下位置，判断新组件的摆放位置：其一是并入该栅格，其二是自动创建嵌套行或外部行放置该组件；
不管是并入栅格还是创建嵌套行，新增的组件不会引起网页页面的布局发生变化，即网页的行数和列数均不发生变更；
若是创建外部行，网页页面新增一行，新增组件置于新建的行中；
(2)左右位置判断：
根据鼠标光标在某一栅格的左右位置，判别新组件的摆放位置：其一是合并入当前栅格的列中，其二是在当前栅格的左右两边新建栅格放置该组件；
若是合并当前栅格的列中，新增的组件不会引起栅格所属行的列数发生变化，栅格宽度不变，栅格内原有组件的宽度缩小；
若是创建新栅格，该栅格所属行的列数增加一个；
步骤303-3：按照设计需要调整栅格宽度
当行中只有一个栅格时，即该行只有一列，栅格占满布局行的显示区域，栅格宽度等于布局行宽度，宽度固定，栅格不支持调整；
当行中的栅格数大于“1”时，相邻两个栅格的交接处存在宽度调节工具，鼠标放置在两个栅格交接处时，宽度调节工具自动显示；
鼠标点击宽度调节工具，左右拖拽可改变栅格宽度，宽度变化单位为一个栅格宽度，宽度的调整不会影响当前行的栅格个数，宽度变化范围为：
(1)增加范围：一个单元栅格宽度<宽度增加值<布局界面内11个单元栅格宽度-预扩大的栅格变化前的宽度；例如当一行中有两个栅格宽度为6的栅格，增加第一个栅格的宽度，其增加的范围是1～5；
(2)缩小范围：一个单元栅格宽度<宽度缩小值<预缩小的栅格变化前的宽度-1个单元栅格的宽度；例如当一行中有两个栅格宽度为6的栅格，减小第一个栅格的宽度，其减小的范围是1～5；
宽度调整工具如图5所示，功能实现代码部分参考如下：
组件删除的同时也会删除相应的栅格，删除的具体步骤包括：
步骤3-4：选中预删除的组件；
步骤3-5：组件上自动显示“删除”标记，鼠标点击该标记；
步骤3-6：根据栅格数目及其内含的组件数目，执行不同的删除的操作，不同布局内的组件删除操作示意图参阅图6所示；
步骤3-6-1：若一行中只有一个栅格，且栅格中含有一个组件，删除组件即删除当前行；
步骤3-6-2：若一行中有多个栅格，且预删除组件所在的栅格内存在多个组件，删除组件不导致网页页面布局改变，网页的行、列数不减少；
步骤3-6-3：若一行中有多个栅格，且预删除组件所在栅格内只存在一个组件，删除组件即删除相应的栅格；
所属领域的普通技术人员应当理解：以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (3)

1.一种多种屏幕响应式网页布局调整的方法，其特征在于，具体包括多屏幕自适应的方法和个性化页面布局调整的方法；
所述多屏幕自适应的方法，通过根据屏幕大小自动调节网页内容宽度，保证网页内容与屏幕能匹配，同时网页页面内各部分内容能随页面宽度的变化自适应变化自身大小；
所述个性化页面布局调整的方法，基于Bootstrap的12栅格系统，采用jQuery UI提供的拖拽放置，实现通过鼠标的拖放完成在网页页面内的功能组件布局；
所述多屏幕自适应的方法，具体步骤包括：
首先，通过响应式页面内容宽度的变换规则，网页内容显示区域宽度随终端设备显示屏大小做适应性改变，响应式页面内容宽度的变换规则是：
（1）“屏幕分辨率>0px且屏幕分辨率<768px”为手机端，页面内容宽度=浏览器界面宽度；
（2）“屏幕分辨率>=768px且屏幕分辨率<990px”为平板电脑竖屏，页面内容定宽750像素；
（3）“屏幕分辨率>=990px且屏幕分辨率<1290px”为笔记本，页面内容定宽980像素；
（4）“屏幕分辨率>=1290px，”为大屏电脑，页面内容定宽1200像素；
其次，网页布局结构以Bootstrap的12栅格系统为基础，实现栅格排列；网页布局以“行”作为划分单位，每一行以“栅格”作为划分单位，功能组件放置在各栅格中；每一个行的布局结构实质由多个单元栅格组成；
所述单元栅格是组成栅格的最小单位，类似于表格中的单元格，Bootstrap的12栅格系统允许每一行的单元栅格数目不超过12个，且单元栅格宽度并非固定数值，而是以百分比的形式表示，以保证当页面宽度发生变化时，单元栅格宽度也会自适应发生改变，不同宽度的单元栅格组合形成不同的页面布局，使页面占比也存在差异；
基于响应式页面内容宽度变换规则，浏览器在请求访问网站时，首先会找到HTML文件中的<meta name= ”viewport ” content = ”width = device – width , initial –scale = 1 , user – scalable = no ”>标记，并计算出当前访问网站的终端设备的显示尺寸，然后根据对比CSS文件中响应式页面内容宽度变换规则，在终端设备上呈现合适终端显示屏幕的网页内容宽度；相应地，网页布局基于Bootstrap的12栅格系统决定单元栅格宽度，基于栅格宽度占比，网页内容元素的尺寸大小也会依据网页内容宽度自适应变化；
所述终端设备包括手机、平板电脑、笔记本、大屏电脑之一，网页元素大小和布局能针对设备做出改变；
不同单元栅格组合对应的页面百分占比具体如下：
（1）若一个行由1个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为100%；
（2）若一个行由2个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为16.6%；
（3）若一个行由3个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为25%；
（4）若一个行由4个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为33.3%；
（5）若一个行由5个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为41.6%；
（6）若一个行由6个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为50%；
（7）若一个行由7个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为58.3%；
（8）若一个行由8个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为66.6%；
（9）若一个行由9个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为75%；
（10）若一个行由10个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为83.3%；
（11）若一个行由11个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为91.6%；
（12）若一个行由12个单元栅格合并组成，则单元栅格合并所组成的栅格宽度占页面内容宽度的比例为100%；
所述个性化页面布局调整的方法，具体步骤包括：
步骤1：主题选择
针对没有个性布局需求的网页页面，能从主题网站案例库中选取调用，所有主题网站按照语言版本、所属行业、网站颜色属性进行分类，并存入主题网站案例库中；
所提供的主题网站案例中包含首页、产品、文章、关于我们和联系我们采用不同布局的网页及其基本的网站样例数据，包括样例图片、介绍性文字、幻灯图片和产品的样例数据；每一个网站案例都是一个完整的网站布局，用户能直接将之发布上线使用；各功能组件以栅格作为承载体，根据个性化需要，也能对案例中功能组件和网页页面布局实施修改；
步骤2：构建页面结构布局
基于Bootstrap的12栅格系统，创建虚拟标记，包括虚拟行、外部行、嵌套行、虚拟列，将其用于构建复杂的网页布局；当有鼠标光标经过当前布局行或栅格位置时，虚拟标记会自动显示以作为放置位置提示；
通过布局“虚拟行”、“虚拟列”、“嵌套行”、“外部行”，实现在一个行内布局多级嵌套页面，有助于构建复杂的网页页面布局；
虚拟行和虚拟列紧贴栅格，嵌套行在虚拟行外部，外部行在嵌套行外部，一个外部行内包含多个嵌套行，一个嵌套行包括多个虚拟行；
步骤3：组件的添加和修改
在构建完毕的网站布局结构中，组件操作通过鼠标的拖拽、拖放和点击实现，基于jQuery UI提供的拖拽放置方法，封装组件添加和拖拽的通用规则、组件删除操作、列宽改变的方法；
所述组件添加的方法，指利用鼠标从组件库中选取组件，并利用简单的鼠标拖拽操作，将组件拖放至预放的位置；
所述组件删除的方法，指利用鼠标执行组件删除，组件删除导致的网页布局的变化会因栅格在当前行中的位置及栅格内组件的个数而不同。
2.根据权利要求1所述的一种多种屏幕响应式网页布局调整的方法，其特征在于，步骤2中所述虚拟标记具体为：所述虚拟行，指位于某一栅格内各组件上下位置的放置标记，放置在此处的组件合并入该栅格中，网页布局不发生变化，即当前行的列数不发生变化；
所述嵌套行，指位于某一栅格外部上下位置的放置标记，在此处放置组件时，自动创建一个嵌套行和一个栅格，形成一个嵌套布局页面，但不影响网页整体布局；栅格由12个单元栅格组成，新建栅格的宽度与所参照栅格的宽度一致；
嵌套行能形成多级的、不限制层数的嵌套布局页面，嵌套布局页面嵌入全局页面中，在不影响全局排列的情况下，丰富布局设计；
所述虚拟列，指位于某一栅格外部左右位置的放置标记，当组件放置此处时，当前栅格所属布局页面中新增一个栅格，新增栅格和当前布局页面内其他栅格的构成形式默认如下：
（1） 若新增栅格和原有栅格总计2列时，2个栅格均由6个单元栅格组成；
（2） 若新增栅格和原有栅格总计3列时，3个栅格均由4个单元栅格组成；
（3）若新增栅格和原有栅格总计4列时，4个栅格均由3个单元栅格组成；
（4）若新增栅格和原有栅格总计5列时，其中4个栅格由2个单元栅格组成，其余1个栅格由1个单元栅格组成；
（5）若新增栅格和原有栅格总计6列时，6个栅格均由2个单元栅格组成；
（6）若新增栅格和原有栅格总计7列时，其中6个栅格均由1个单元栅格组成，其余1个栅格由6个单元栅格组成；
（7）若新增栅格和原有栅格总计8列时，其中7个栅格均由1个单元栅格组成，其余1个栅格由5个单元栅格组成；
（8）若新增栅格和原有栅格总计9列时，其中8个栅格均由1个单元栅格组成，其余1个栅格由4个单元栅格组成；
（9）若新增栅格和原有栅格总计10列时，其中9个栅格均由1个单元栅格组成，其余1个栅格由3个单元栅格组成；
（10）若新增栅格和原有栅格总计11列时，其中10个栅格均由1个单元栅格组成，其余1个栅格由2个单元栅格组成；
（11）若新增栅格和原有栅格总计12列时，每一个栅格均由1个单元栅格组成；此情况下不可新增栅格，但依然能根据提示位置添加嵌套行和外部行；
所述外部行，指位于网页页面上每一个行的上下位置的放置标记；网页整体布局以“行”作为划分单位，在行的外部行标记处放置组件时，自动创建一个行即新建行和一个宽度为100%的栅格，相应的，新建行的上下位置形成新的外部行，新建栅格的上下及左右位置形成新的虚拟列、虚拟行和嵌套行，网页布局因布局内行数变化发生改变；新建行通过添加组件，将栅格划分多个部分，形成一行多列的布局。
3.根据权利要求1所述的一种多种屏幕响应式网页布局调整的方法，其特征是，步骤3中所述组件添加的方法，具体步骤包括：
步骤3-1：选择组件
从组件库中选择组件，鼠标点击选中，鼠标拖拽移动组件；
步骤3-2：位置判断，包括上下位置和左右位置的判断；
（1）上下位置判断：根据鼠标光标在某一栅格的上下位置，判断新组件的摆放位置：其一是并入该栅格，其二是自动创建嵌套行或外部行放置该组件；
不管是并入栅格还是创建嵌套行，新增的组件不会引起网页页面的布局发生变化，即网页的行数和列数均不发生变更；
若是创建外部行，网页页面新增一行，新增组件置于新建的行中；
（2）左右位置判断：
根据鼠标光标在某一栅格的左右位置，判别新组件的摆放位置：其一是合并入当前栅格的列中，其二是在当前栅格的左右两边新建栅格放置该组件；
若是合并入当前栅格的列中，新增的组件不会引起栅格所属行的列数发生变化，栅格宽度不变，栅格内原有组件的宽度缩小；
若是创建新栅格，该栅格所属行的列数增加一个；
步骤3-3：按照设计需要调整栅格宽度
当行中只有一个栅格时，即该行只有一列，栅格占满布局行的显示区域，栅格宽度等于布局行宽度，宽度固定，栅格不支持调整；
当行中的栅格数大于“1”时，相邻两个栅格的交接处存在宽度调节工具，鼠标放置在两个栅格交接处时，宽度调节工具自动显示；
鼠标点击宽度调节工具，左右拖拽可改变栅格宽度，宽度变化单位为一个栅格宽度，宽度变化范围为：
（1）增加范围：一个单元栅格宽度<宽度增加值<布局界面内11个单元栅格宽度-预扩大的栅格变化前的宽度；
（2）缩小范围：一个单元栅格宽度<宽度缩小值<预缩小的栅格变化前的宽度-1个单元栅格的宽度；
所述组件删除的方法，具体步骤包括：
步骤3-4：选中预删除的组件；
步骤3-5：组件上自动显示“删除”标记，鼠标点击该标记；
步骤3-6：根据栅格数目及其内含的组件数目，执行不同的删除的操作；
步骤3-6-1：若一行中只有一个栅格，且栅格中含有一个组件，删除组件即删除当前行；
步骤3-6-2：若一行中有多个栅格，且预删除组件所在的栅格内存在多个组件，删除组件不导致网页页面布局改变，网页的行、列数不减少；
步骤3-6-3：若一行中有多个栅格，且预删除组件所在栅格内只存在一个组件，删除组件即删除相应的栅格。
CN201511027095.7A 2015-12-31 2015-12-31 一种多种屏幕响应式网页布局调整的方法 Active CN105740315B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201511027095.7A CN105740315B (zh) 2015-12-31 2015-12-31 一种多种屏幕响应式网页布局调整的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201511027095.7A CN105740315B (zh) 2015-12-31 2015-12-31 一种多种屏幕响应式网页布局调整的方法

Publications (2)

Publication Number Publication Date
CN105740315A CN105740315A (zh) 2016-07-06
CN105740315B true CN105740315B (zh) 2019-10-11

Family

ID=56296413

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201511027095.7A Active CN105740315B (zh) 2015-12-31 2015-12-31 一种多种屏幕响应式网页布局调整的方法

Country Status (1)

Country Link
CN (1) CN105740315B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11886790B2 (en) 2021-08-05 2024-01-30 Micro Focus Llc Method and system for automatic test website layout

Families Citing this family (25)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
DE102016214647A1 (de) * 2016-08-08 2018-02-08 Heidelberger Druckmaschinen Ag Montage Editor zur Herstellung von Druckbogen
CN106407261A (zh) * 2016-08-24 2017-02-15 上海斐讯数据通信技术有限公司 一种页面自适应屏幕的方法及智能终端
CN108021310A (zh) * 2016-10-28 2018-05-11 中国电信股份有限公司 手机页面构建方法和装置
CN106603634A (zh) * 2016-11-29 2017-04-26 北海高创电子信息孵化器有限公司 一种多屏响应式的网站组建系统
CN107193518B (zh) * 2017-05-23 2021-08-03 腾讯科技（深圳）有限公司 一种信息显示的方法以及终端设备
CN110020291B (zh) * 2017-09-30 2022-05-27 北京国双科技有限公司 网页布局的处理方法及装置
CN107704244A (zh) * 2017-10-30 2018-02-16 郑州云海信息技术有限公司 一种实现bookstrap table表格列拖拽的方法
CN110309449A (zh) * 2018-02-10 2019-10-08 阿里巴巴集团控股有限公司 页面渲染方法及装置
CN108415985B (zh) * 2018-02-11 2021-09-03 西安西点信息技术有限公司 一种用户设备上html网页的适配方法
TWI670609B (zh) * 2018-03-29 2019-09-01 汪純瑩 鍵值對表格之響應式網頁生成方法
CN109254818B (zh) * 2018-08-28 2021-11-23 北京影谱科技股份有限公司 针对浏览器不同分辨率的像素级定位方法和装置
CN109471628A (zh) * 2018-10-30 2019-03-15 中译语通科技股份有限公司 一种弹性响应式网页数据设定方法
CN109729409A (zh) * 2018-12-27 2019-05-07 贵州省广播电视信息网络股份有限公司 一种自动布局方法
CN110188299B (zh) * 2019-05-27 2021-06-22 北京字节跳动网络技术有限公司 响应式页面处理方法、装置及电子设备
CN110532490A (zh) * 2019-07-31 2019-12-03 阿里巴巴集团控股有限公司 一种页面布局方法及装置
WO2021035165A1 (en) * 2019-08-21 2021-02-25 Aveva Software, Llc Responsive layout system and server
CN111142994A (zh) * 2019-12-11 2020-05-12 东软集团股份有限公司 数据显示的方法、装置、存储介质及电子设备
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
CN111680241B (zh) * 2020-04-16 2023-08-08 上海淇玥信息技术有限公司 一种页面布局的方法、装置和电子设备
CN111736939A (zh) * 2020-06-23 2020-10-02 平安医疗健康管理股份有限公司 一种页面自适应调整方法、装置、存储介质及计算机设备
CN112130943A (zh) * 2020-09-09 2020-12-25 中盈优创资讯科技有限公司 一种自定义可视化布局设计的方法
CN112416347B (zh) * 2020-11-25 2022-07-12 中睿信数字技术有限公司 一种基于栅格和动态磁贴的网页布局方法
CN114895993A (zh) * 2022-01-20 2022-08-12 德明通讯（上海）股份有限公司 一种基于显示屏幕智能自适应的设计方法
CN114968231B (zh) * 2022-04-11 2023-03-24 北京梦诚科技有限公司 一种用于数据和图表的可视化组件响应式布局方法和系统
CN116719597B (zh) * 2023-08-10 2024-01-26 北京冠群信息技术股份有限公司 基于格栅布局的自适应视图渲染方法及创建方法

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500166B (zh) * 2013-08-22 2016-07-13 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置
AU2015264474A1 (en) * 2014-05-23 2016-10-06 Search Optics, LLC Systems and methods for programming behavior of a website to respond to capabilities of different devices

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11886790B2 (en) 2021-08-05 2024-01-30 Micro Focus Llc Method and system for automatic test website layout

Also Published As

Publication number Publication date
CN105740315A (zh) 2016-07-06

Similar Documents

Publication Publication Date Title
CN105740315B (zh) 一种多种屏幕响应式网页布局调整的方法
CN105373567B (zh) 页面生成方法及客户端
CN104679906B (zh) 利用图片生成链接的方法及系统
CN102414682B (zh) 用于在图形用户接口中提供零碎网页的方法和设备
CN104834753A (zh) 生成网页截图的方法及其装置
CN103870558B (zh) 页面渲染方法和遮罩层创建方法
CN102830972A (zh) 互联网浏览器的多网页浏览装置
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
Nebeling et al. CrowdAdapt: enabling crowdsourced web page adaptation for individual viewing conditions and preferences
CN104978317A (zh) 网页生成方法及装置、网站生成方法及建站服务器
JP2016024625A (ja) 情報表示装置、配信装置、情報表示方法および情報表示プログラム
CN104239305A (zh) 生成及展现电子文档的方法及装置
CN105094930A (zh) 一种定位图片系统及方法
CN103942231B (zh) 一种网页的显示方法及电子设备
CN104123362A (zh) 一种面向多终端设备的网页适应性布局方法
Peng et al. The design and research of responsive web supporting mobile learning devices
CN103927209A (zh) Feebless建站引擎
CN108268260A (zh) 一种基于一体化支撑技术的快速微应用组装方法
CN109683978A (zh) 一种流式布局界面渲染的方法、装置以及电子设备
CN102982088B (zh) 一种用于提供用户在目标页面上的反馈信息的方法
CN102314426A (zh) 一种分布式构建网页的系统
CN102314428A (zh) 一种分布式构造网页的方法
CN108984070A (zh) 用于热力图成像的方法、装置、电子设备及可读介质
CN105578294B (zh) 浏览切换处理方法、装置及系统
CN102314427A (zh) 一种分布式生成网页的方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20171201

Address after: Huidalu Nanjing high tech Development Zone of Jiangsu province 210032 City No. 6 Building 2 floor room 211 Beidou

Applicant after: Nanjing focus leading Cloud Computing Technology Co., Ltd.

Address before: A software building Spark Road 210003 in Jiangsu province high tech Industrial Development Zone of Nanjing city 8-12F

Applicant before: Focus Technology Co., Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant