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

摘要

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

主权项

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提供的拖拽放置方法，封装组件添加和拖拽的通用规则、组件删除操作、列宽改变的方法；所述组件添加的方法，指利用鼠标从组件库中选取组件，并利用简单的鼠标拖拽操作，将组件拖放至预放的位置；所述组件删除的方法，指利用鼠标执行组件删除，组件删除导致的网页布局的变化会因栅格在当前行中的位置及栅格内组件的个数而不同。