[发明专利]一种多种屏幕响应式网页布局调整的方法

说明书

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

技术领域

本发明属于互联网网页设计技术领域，涉及个性化响应式网站页面的构建和制作，具体为一种多种屏幕响应式网页布局调整的方法。

背景技术

在传统的网站开发流程中，网页布局的实现通常由经验丰富的前端开发工程师负责。在此方式中，前端开发工程师的人力成本较高，实现所有网站页面的个性化布局需要的时间较长，一般不适用于有互联网建站需求但没有网络技术部门的企业。

众多互联网建站企业提供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(标准通用标记语言的一个子集)文件样式的计算机语言。

本发明的技术方案是，一种多种屏幕响应式网页布局调整的方法，具体包括多屏幕、多终端自适应的方法和个性化页面布局调整的方法；