基于Bootstrap框架的网页响应式显示方法及装置

摘要

本发明涉及一种基于Bootstrap框架的网页响应式显示方法及装置，基于当前设备屏幕尺寸，获得当前浏览器网页根元素fontsize值;基于所述当前浏览器网页根元素fontsize值，对浏览器网页进行rem布局显示。本发明快速开发、易于维护，适用于不同设备屏幕尺寸。

说明书

技术领域

本发明涉及一种基于Bootstrap框架的网页响应式显示方法及装置。

背景技术

目前基于Bootstrap框架的网页响应式开发技术主要单纯的依赖于CSS3标准的媒体查询属性@media。使用@media媒体查询属性可以针对不同的媒体类型及不同的媒体分辨率定义不同的样式，特别是响应式页面，从而达到自适应的效果。Boostrap框架创建了一个包含适应各种设备尺寸、分辨率样式的CSS文件Boostrap-responsive.css，一旦页面在特定设备的页面中加载，媒体查询会先检测设备的视口大小，设备的像素比DPR，然后加载特定于屏幕大小与分辨率的样式。

在实际开发应用中，不考虑分辨率不同的情况，针对设备宽度大小不尽相同的问题，媒体查询是有限的，即是可以枚举出来的，其只能适应主流设备屏幕的宽高，而要同时匹配足够多的屏幕大小与不同的设备分辨率，需要改变的样式、设计和维护的版本较多，那么多套样式代码就会大大增加开发者的工作量，导致效率低下，后期维护成本增加。因此，亟需一种既可以满足响应式网页布局，又可以满足快速开发、易于维护，适用于不同设备屏幕尺寸的布局技术。

发明内容

本发明的发明目的在于提供基于Bootstrap框架的网页响应式显示方法及装置，快速开发、易于维护，适用于不同设备屏幕尺寸。

基于同一发明构思，本发明具有两个独立的技术方案：

1、一种基于Bootstrap框架的网页响应式显示方法，包括如下步骤：

步骤1：基于当前设备屏幕尺寸，获得当前浏览器网页根元素fontsize值;

步骤2：基于所述当前浏览器网页根元素fontsize值，对浏览器网页进行rem布局显示。

进一步地，步骤2中，当浏览器网页窗口存在缩放情况时，基于当前浏览器网页窗口缩放比例DPR，获得缩放属性scale值；基于将所述获得的缩放属性scale值，对当前浏览器网页根元素fontsize值进行缩放后，对浏览器网页进行rem布局显示。

进一步地，步骤1中，包括如下步骤：

步骤1.1：动态获取当前设备屏幕尺寸；

步骤1.2：基于当前设备屏幕尺寸和网页默认尺寸获得调节系数R;

步骤1.3：基于所述调节系数R,获得当前浏览器网页根元素fontsize值。

进一步地，步骤1.1中，利用JavaScript语言动态获取当前设备屏幕宽度。

进一步地，步骤1.2中，调节系数R=当前设备屏幕宽度/网页默认宽度。

进一步地，步骤1.3中，当前浏览器网页根元素fontsize值通过如下公式获得，

F=R×A

式中，F为当前浏览器网页根元素fontsize值，单位为像素单位px，R为调节系数,A为设定的常数。

进一步地，

进一步地，步骤2中，当浏览器网页窗口存在缩放情况时，利用JavaScript语言动态获取当前浏览器网页窗口缩放比例DPR。

进一步地，步骤2中，当浏览器网页窗口存在缩放情况时，利用Bootstrap框架CSS3标准下的transform属性，获得缩放属性scale值。

2、一种基于Bootstrap框架的网页响应式显示装置，用于执行上述的方法。

本发明具有的有益效果：

本发明基于当前设备屏幕尺寸，获得当前浏览器网页根元素fontsize值;基于所述当前浏览器网页根元素fontsize值，对浏览器网页进行rem布局显示。Rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，Rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的fontSize变化。根元素的fontSize相当于提供了一个基准，当页面的size发生变化时，只需要改变fontSize的值，那么以Rem为固定单位的元素大小也会发生响应的变化。因此，如果通过Rem来实现响应式布局，需要根据视图容器的大小，动态的改变fontSize值。使用JavaScript来动态设置根元素fontSize的大小，即在初始化函数ready中根据屏幕视口的宽度大小来一次性编写不同设备fontSize的代码。本发明可实现一次开发，多次调用，满足不同终端设备屏幕大小与不同分辨率下的响应式网页要求，不仅易于维护，而且提高了开发效率与代码简洁性。

本发明当浏览器网页窗口存在缩放情况时，基于当前浏览器网页窗口缩放比例DPR，将所述当前浏览器网页根元素fontsize值进行缩放后，对浏览器网页进行rem布局显示；利用Bootstrap框架CSS3标准下的transform属性，获得缩放属性scale值，有效保证在缩放情况下，浏览器网页上的背景图片和悬浮元素相对位置保持一致。

本发明动态获取当前设备屏幕尺寸；基于当前设备屏幕尺寸和网页默认尺寸获得调节系数R;基于所述调节系数R,获得当前浏览器网页根元素fontsize值；当前浏览器网页根元素fontsize值通过如下公式F=R×A获得，A取值为100。本发明通过上述方法能够快速获得当前浏览器网页根元素fontsize值，进而实现网页响应，有效提高开发效率与代码简洁性。

附图说明

图1是本发明基于Bootstrap框架的网页响应式显示方法的流程图；

图2是1920*1080分辨率下缩放比为1时网页效果图；

图3是1920*1080分辨率下缩放比为0.5时网页效果图；

图4是分辨率为1920*1080，页面缩放比约为0.9时的网页效果图；

图5是分辨率为1366*768，页面缩放比约为0.9时的网页效果图；

图6是分辨率为1366*768，页面缩放比约为0.8时的网页效果图。

具体实施方式

下面结合附图所示的实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替代，均属于本发明的保护范围之内。

实施例一：

基于Bootstrap框架的网页响应式显示方法

常见显示设备分为超小屏幕（手机）、小屏设备（平板）、中等屏幕（旧式电脑）及大屏设备（现代电脑），分别对应屏幕尺寸为768px以下、768px-992px、992px-1200px及1200px以上。现代Web端网页开发需要兼容不同设备屏幕尺寸及相同屏幕尺寸下不同的分辨率问题以达到网页浏览最佳体验效果。在采用Bootstrap框架的软件系统平台中，传统方式实现不同设备屏幕宽度与不同分辨率下的网页响应式效果：

完全利用CSS3标准下的媒体查询属性@media来多次编写适配不同屏幕尺寸的代码，如下所示：

@media screen and (max-width: 768px){} //为最大宽度为768像素的设备设置样式；

@media screen and (max-width: 992px){} //为最大宽度为992像素的设备设置样式；

@media screen and (max-width: 1200px){} //为最大宽度为1200像素的设备设置样式；

@media screen and (min-width: 1200px){} //为最小宽度为1200像素的设备设置样式；

︙

这样样式表的基本作用就是，通过使用 “min-width”和“max-width”属性，来根据设备的最大宽度和最小宽度决定使用的样式。但随着设备屏幕尺寸大小的变化，@media无法为众多非主流的屏幕大小配置不同的CSS样式表，代码冗余且维护较难。

如图1所示，本发明基于Bootstrap框架的网页响应式显示方法包括如下步骤：

步骤1：基于当前设备屏幕尺寸，获得当前浏览器网页根元素fontsize值。

具体包括如下步骤：

步骤1.1：动态获取当前设备屏幕尺寸；

利用JavaScript语言动态获取当前设备屏幕宽度。

屏幕尺寸与屏幕分辨率之间的关系，以分辨率375*667px为例，分辨率375*667px表示屏幕宽度为375个像素，高度为667个像素。

步骤1.2：基于当前设备屏幕尺寸和网页默认尺寸获得调节系数R;

调节系数R=当前设备屏幕宽度/网页默认宽度。

本实施例中，网页默认尺寸（网页设计稿默认尺寸）为1920*1080分辨率，则调节系数R= clientWidth / 1920, clientWidth表示当前屏幕宽度。

步骤1.3：基于所述调节系数R,获得当前浏览器网页根元素fontsize值。

当前浏览器网页根元素fontsize值通过如下公式获得，

F=R×A

式中，F为当前浏览器网页根元素fontsize值，单位为像素单位px，R为调节系数,A为设定的常数。

本实施例中，A取值为100。

例如，iphone6手机分辨率为375*667px,Ipad分辨率为768*1024px,PC分辨率为1920*1080px，默认网页以分辨率为1920*1080px的PC端设计稿为例，以上设备换算成对应的fontSize值分别为：19.53125px、40px、100px。

步骤2：基于所述当前浏览器网页根元素fontsize值，对浏览器网页进行rem布局显示。

当前页面的CSS样式文件中，定义html标签的fontSize值，其它标签值的单位px全部换成rem单位。Rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，Rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的fontSize变化。根元素的fontSize相当于提供了一个基准，当页面的size发生变化时，只需要改变fontSize的值，那么以Rem为固定单位的元素大小也会发生响应的变化

在实际开发中，相同设备不同分辨率情况下网页所呈现的效果是一致的，即以高分辨率设计的网页在低分辨率的屏幕上显示时网页内容大小是一样的，但低分辨率的屏幕像素密度低，相同内容的网页仅仅能看到局部内容，此时为了达到最佳视觉体验效果，需要考虑缩放网页问题。例如，当gif图片或者一个video作为背景时，采用以上代码可以动态改变悬浮在背景上元素的大小和位置，但背景几乎不会发生等比例缩放，导致背景位置与悬浮在背景上的元素位置发生错位。如图2、图3对比所示，相同设备下不同缩放比，背景图片上的元素自适应按照上述代码已经改变位置，但背景图片不会发生等比例缩放（不能自适应），与位于背景上的元素发生错位。

当浏览器网页窗口存在缩放情况时，基于当前浏览器网页窗口缩放比例DPR，获得缩放属性scale值；基于将所述获得的缩放属性scale值，对当前浏览器网页根元素fontsize值进行缩放后，对浏览器网页进行rem布局显示。

本实施例中，当浏览器网页窗口存在缩放情况时，利用JavaScript语言动态获取当前浏览器网页窗口缩放比例DPR。当浏览器网页窗口存在缩放情况时，利用Bootstrap框架CSS3标准下的transform属性，获得缩放属性scale值，对当前浏览器网页根元素fontsize值进行缩放。如图4—图6所示，对当前浏览器网页根元素fontsize值进行缩放后，背景图片与悬浮元素相对位置保持一致，即背景图片位置实现自适应。

scale值为可以是2个，它本身其实相当于一个函数。

scale(x,y) 对元素进行缩放，X表示水平方向缩放的倍数 Y表示垂直方向的缩放倍数，Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的，并以X为准。

例如：transform:scale(2,2.5)，表示X方向放大2倍，Y方向放大2.5倍。scaleX()表示元素只在X轴（水平方向）缩放元素，默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点。

例如：transform:scaleX(2)，表示只在X方向放大2倍。

scaleY() 元素只在Y轴（垂直方向）缩放元素。

基点一样在元素的中心位置。可以通过transform-origin来改变基点。例如：transform:scaleY(2)，表示只在Y方向放大2倍。

实施例二：

一种基于Bootstrap框架的网页响应式显示装置，

所述装置用于执行上述方法。

上文所列出的一系列的详细说明仅仅是针对本发明的可行性实施方式的具体说明，它们并非用以限制本发明的保护范围，凡未脱离本发明技艺精神所作的等效实施方式或变更均应包含在本发明的保护范围之内。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。