CN103500166A

CN103500166A - 一种渐进增强的响应式网页设计方法

Info

Publication number: CN103500166A
Application number: CN201310370232.1A
Authority: CN
Inventors: 张金柱; 姚键; 潘柏宇; 卢述奇
Original assignee: 1Verge Internet Technology Beijing Co Ltd
Current assignee: Youku Culture Technology Beijing Co ltd
Priority date: 2013-08-22
Filing date: 2013-08-22
Publication date: 2014-01-08
Anticipated expiration: 2033-08-22
Also published as: CN103500166B

Abstract

本发明公开一种渐进增强的响应式网页设计方法，涉及互联网网页设计领域。本发明可自适应于不同的设备，实现网站布局和内容与设备特点匹配，提高网站性能和增强用户体验。本发明以低分辨率设备为先，按设备分辨率增加，逐渐优化网页布局和内容展示，建立流动的网格，流动的标签，灵活的断点，并通过外部脚本选择性增加内容，实现布局和内容自适应于设备尺寸，减小不需要的页面加载，优化网页展示效果。其有益效果在于，可充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。

Description

一种渐进增强的响应式网页设计方法

技术领域

本发明涉及互联网领域，尤其涉及互联网网页设计、网页多终端自适应。

背景技术

伴随通信设备性能以及无线网络通信速度提升，以智能手机，便携式电脑为代表的智能终端数量增长迅速，其用户数量很快将超越台式电脑等非移动设备。用户通过互联网获取信息，主要基于网页浏览器，由于传统的网页设计较大程度上基于台式电脑而设计，其网页标签存在固定的宽度和高度，灵活性较低，当用低分辨率的智能设备浏览网页时，用户需要不断拖动才能看到网页呈现的全部信息，影响用户体验。虽然网站可以针对低分辨率设备设计新的网页，但由于设备种类多，尺寸复杂，同时网站需要维护多个网页版本，此种分散将消耗较大开发和维护成本，而且不利于网站搜索引擎优化（SEO）和网站品牌建设。此外，网站可以开发独立的针对于该网站的应用（APP），用户通过应用获取信息，但是独立开发新用仍需较大开发和维护成本。

W3C在CSS3中强化了用于设备识别和风格定制的语法，具体为引入了media query等相关语法，可用于针对不同分辨率设备的检测，同时得到各大浏览器厂商的支持，为网页自适应提供了基础保障。由于移动设备处理能力有限，同时用户需承担较大网页流量资费，因此，当用户使用智能手机，便携式电脑等移动设备通过浏览器上网时，如果网站能提供低流量消耗，高质量内容呈现的网页，将有利于用户体验提升，同时提升网站性能和增强网站品牌。因此，一个网站，针对不同分辨率的设备，提供渐增的网页布局和内容展示，将有利于网站性能提升，成本节约，优化网站搜索引擎，同时提升用户体验。

发明内容

针对现有技术中存在的缺陷，本发明提出一种渐进增强的响应式网页设计方法，通过分辨率（或屏幕尺寸）从低到高，提供渐进增强的网页设计方法，实现一个网站自适应于不同设备，减小不必要的网页数据交互，提升用户体验。

为实现上述目的，本发明具体提供了如下技术方案：

一种渐进增强的响应式网页设计方法，包括：

1）根据屏幕尺寸和客户端特征划分网页源代码服务范围：

2）根据上述服务范围划分断点；

3）针对不同断点确定响应式CSS规则和Javascript程序；

其中所述步骤1）中的屏幕尺寸可分为：非常小的屏幕（例如老式非触摸屏手机）、小屏幕（例如触摸式智能手机）、中等屏幕（例如ipad）、大屏幕（例如PC和智能TV）。

其中针对所述非常小的屏幕设备提供服务包括：基本的HTML，简单的布局，小图片，有限的CSS和Javascript（如果支持）。在内容上，提供网站最重要的信息展示；针对所述小屏幕设备提供服务包括：除基本HTML外，HTML高级功能（如果支持），简单的布局，比1中所提及图片尺寸稍大的小图片，比1提供更多CSS和Javascript。在内容上，提供网站最重要信息和比较重要信息；针对中等屏幕设备，由于其尺寸更大，存在更多空间，提供服务包括：稍微丰富的HTML，多列布局，更大的图片，更多CSS和Javascript。在内容上，提供网站最重要信息、比较重要信息和一般信息；针对大屏幕设备提供服务包括：丰富的HTML，宽屏多列布局，大图片，丰富的CSS和Javascript。在内容上，提供丰富的信息展示。

其中所述步骤2）中的根据上述服务范围划分断点具体为:根据屏幕尺寸的宽度或高度划分多个断点，依据断点通过CSS实现自适应布局。其中网站可根据实际需求增加或减少断点。这样不同设备可按需采用不同规则，实现根据分辨率大小渐进增强，实现布局及内容的分立展示。

其中所述步骤3）中的针对不同断点确定响应式CSS规则和Javascript程序包括：实现灵活的网格以及灵活的标签，结合上述网格和标签调整断点值，选择性填充内容。

有益效果：本发明实现一个网页设计方法，自适应于不同的设备，实现网站布局和内容与设备特点匹配，提高网站性能和增强用户体验。本发明以低分辨率设备为先，按设备分辨率增加，逐渐优化网页布局和内容展示，建立流动的网格，流动的标签，灵活的断点，并通过外部脚本选择性增加内容，实现布局和内容自适应于设备尺寸，减小不需要的页面加载，优化网页展示效果。

其优势在于，通过CSS规则和辅助的脚本控制，实现灵活的布局，对小尺寸设备，加载较少数据，展示最重要的网站信息。随着设备尺寸增加，网页布局能够自适应与设备屏幕，并通过选择性的加载更多内容到网页源码中，达到充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。

附图说明

图1是本发明针对大中小尺寸设备的实现效果图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的实施例提供了一种响应式网页设计方法，通过分辨率（或屏幕尺寸）从低到高，提供渐进增强的网页设计方法，实现一个网站自适应于不同设备，减小不必要的网页数据交互，提升用户体验。

为实现上述目的，本发明实施例提供了如下技术方案：

一种渐进增强的响应式网页设计，该方法包括：

根据屏幕尺寸和客户端特征划分网页源代码服务范围：

1.非常小的屏幕（例如老式非触摸屏手机）。提供服务包括：基本的HTML（5），简单的布局，小图片，有限的CSS和Javascript（如果支持）。在内容上，提供网站最重要的信息展示。

2.小屏幕（例如触摸式智能手机）。提供服务包括：除基本HTML（5）外，HTML5高级功能（如果支持），简单的布局，比1中所提及图片尺寸稍大的小图片，比1提供更多CSS和Javascript。在内容上，提供网站最重要信息和比较重要信息。

3.中等屏幕（例如ipad）。由于尺寸更大，存在更多空间，提供服务包括：稍微丰富的HTML（5），多列布局，更大的图片，更多CSS和Javascript。在内容上，提供网站最重要信息、比较重要信息和一般信息。

4.大屏幕（例如PC和智能TV）。提供服务包括：丰富的HTML（5），宽屏多列布局，大图片，丰富的CSS和Javascript。在内容上，提供丰富的信息展示。

根据上述服务范围划分断点：

可以根据屏幕尺寸的宽度或高度划分多个断点，依据断点通过CSS实现自适应布局，其主体结构包括：

以上所列主体结构，网站可根据实际需求增加或减少断点，进而相应扩充或消减此结构，min-width或max-width可根据需要替换为等效的min-device-width或max-device-width，而媒介类型也不限制于screen，CSS3中认可的媒介类型还包括：all，print，braille，handheld，embossed，projection，speech，tty，tv。这些都可以替换主体结构中的screen，用以支持多种设备，同时，可以利用and语法对每种断点引入不影响主体的限制，以便适应特殊场景。根据此结构，所有设备将继承结构中所述的有限的CSS规则，低分辨率设备将在主体结构前部匹配而忽略后部的CSS规则，较高分辨率的设备将在主体结构后部匹配而忽略前部低分辨率设备的CSS规则，这样不同设备可按需采用不同规则，实现根据分辨率大小渐进增强，实现布局及内容的分立展示。

进一步，针对不同断点确定响应式CSS规则和Javascript程序：

1.实现灵活的网格：首先设计不同断点所对应的页面布局，该布局固定了width、height、margin、padding、font-size等标签且以pixels为单位，进一步，需将此绝对像素转换为相对像素值。为转化成相对比率，针对某一绝对像素，需根据标签所处位置，结合标签上层容器和本标签绝对像素值，计算本标签涉及到的相对像素值。因此，如非特别指定，所有绝对像素值都可以转换为相对值。根据需要可将相对比率转换为百分制，或者加入单位，比如针对font-size，可能加入em作为单位。

2.实现灵活的标签

步骤1中实现了灵活的网格，由于浏览器对标签的解释存在差异，以及不同标签本身功能的差异性，编写代码时，需对涉及到的特殊标签做进一步调整，使其适应网页布局。其中图片、视频、对象，嵌入标签或其他可能冲击标签外层容器，造成布局紊乱的标签都需分别采用CSS规则或结合Javascript对标签进行展示控制，使得当该标签所填充内容比其外部容器大时，网页布局不至于改变。

3.结合1与2调整断点值

按照步骤1与2设计响应式网页时，由于设备和浏览器的多样性，针对某一断点类型，其页面呈现会不同于原始设计，因此，通过调整页面尺寸，查看显示效果，确定最合适断点，以便布局不被破坏，内容显示完整。有些浏览器版本不支持CSS3的media query属性，比如Internet explorer9以下的版本，针对此种情况，可以采用IE的条件评论语法，选择性的引入额外的CSS规则，或者利用Javascript程序使得不同设备进入不同断点区域。其他浏览器也可采用相应Javascript程序，使得不同设备进入CSS中的不同断点区域。

4.内容的选择性填充

正如本发明内容所述，低分辨率设备只加载一部分必须内容，而高分辨率设备会加载更多丰富内容。因此根据步骤3中的新断点值，通过脚本程序控制内容的填充，使得不同网页布局展示不同级别的信息，实现网页渐进增强和自适应。其中，脚本程序是以新断点作为临界点，获得设备尺寸，用该尺寸与临界点比较，进而决定是否加入新内容，其中，该新断点为逻辑转折点，在网站CSS规则和外部脚本间具有对应值，其结果为不加载或选择性的加载部分或全部新增信息，实现网页布局和内容与设备特点匹配，灵活的数据加载，进而提高网站性能和增强用户体验。

下面通过一个具体的实施例的描述来阐述理解本发明，但是本发明还可以采用其他不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本发明内涵的情况下做类似推广，因此本发明不受下面公开的具体实施例的限制。

根据网站服务内容和用户群里，确定渐进增强的响应式网页所服务的设备尺寸，确定初始断点，例如一种断点实例如表1。

表1：一种根据水平宽度划分的断点:

为不同断点设计页面布局，如本发明内容所述，所确定的断点1，其为基本风格和增强风格的临界点，依据表1，断点1可以为320px，因此主体架构可以为：

确定布局后，针对每种布局，需将固定像素转化为相对值，并根据CSS语法要求，加上诸如em这样的单位，使得网页布局具有流动性。例如根据上下文采用如下公式：

相对比率=目标像素/上下文像素值

例如对于某标签的margin属性，确定margin属性相对值时，目标像素为margin对应的像素值，而其上下文为该标签的外层容器；例如某标签的padding属性，确定padding属性相对值时，目标像素为padding的像素值，而其上下文为该标签本身。

对于诸如img，video等标签，其内容尺寸可能会对布局展示产生冲击。

因此需限制他们在外部容器的内部显示，一种限制方法如下：

img，embed，object，video{

max-width：100％；

}

根据断点值，测试在不同设备上，不同浏览器在断点处的显示效果，寻找最靠近断点值的尺寸，使得网页按照最初设计自适应于设备和浏览器，因此上述主体架构中的断点值可能会改变。

传统网页设计中，为使得一个网页自适应于不同尺寸的浏览器，最大尺寸设备网页源文件会包含最多标签和内容信息，当小屏幕设备浏览网页时，其仍需加载所有标签内容，造成较大流量消耗，对网站性能和用户体验都有不利影响。根据本发明说明，需引入额外的脚本控制程序，例如采用Javascript程序，根据调整后的断点尺寸，选择性加载内容信息，使得大尺寸设备获得更丰富的内容展示。

如表1所示，针对更高分辨率设备，假设调整后的断点不是768px，而是接近768px的一个值，假设为800px，则一种动态加载内容信息可以为

采用诸如此类的方法，可以随设备尺寸增大，选择性的增加内容信息，进而丰富网站内容。

一种实现效果如图1。按照本发明说明，小尺寸设备布局简单，以文字和（或）小图片信息为主，展示网站为用户提供的最重要的信息。中等尺寸设备将有更多栏目，如图1所示，相比小尺寸设备，中等尺寸设备增加了栏目4且与小尺寸设备栏目3相当，而中等尺寸的栏目3为新增栏目，经过脚本的尺寸自适应判断，其栏目内容由外部脚本动态加入。对于大尺寸设备，其具有最丰富的内容展示，相比于小尺寸设备，新增栏目4和5，相比于中等尺寸设备，新增栏目5。图1中大尺寸设备的栏目5和3与中等尺寸设备的栏目4和3相当，而栏目4则为因尺寸增大而新增栏目。这些栏目的具体内容，则由外部脚本动态添加或修改。

按照本发明方法，小尺寸设备将加载更少代码，显示网站最想呈现的信息，中等尺寸设备将加载更多代码，提供更丰富的内容展示，而大尺寸设备将加载最多代码，显示最丰富的网页内容。这样既能适应于设备使用场合，又能提升网站性能和用户体验。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明公开的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

Claims

1.一种渐进增强的响应式网页设计方法，其特征在于，包括如下步骤：

1）根据屏幕尺寸和客户端特征划分网页源代码服务范围：

2）根据上述服务范围划分断点；

3）针对不同断点确定响应式CSS规则和Javascript程序。

2.根据权利要求1所述的渐进增强的响应式网页设计方法，其特征在于，其中所述步骤1）中的屏幕尺寸可分为：非常小的屏幕、小屏幕、中等屏幕和大屏幕。

3.根据权利要求2所述的渐进增强的响应式网页设计方法，其特征在于，其中针对所述非常小的屏幕设备提供服务包括：基本的HTML，简单的布局，小图片，有限的CSS和Javascript；在内容上，提供网站最重要的信息展示。

4.根据权利要求2所述的渐进增强的响应式网页设计方法，其特征在于，针对所述小屏幕设备提供服务包括：除基本HTML外，HTML高级功能，简单的布局，比非常小的屏幕设备中所使用图片尺寸稍大的小图片和更多CSS和Javascript；在内容上，提供网站最重要信息和比较重要信息。

5.根据权利要求2所述的渐进增强的响应式网页设计方法，其特征在于，针对中等屏幕设备提供服务包括：稍微丰富的HTML，多列布局，更大的图片，更多CSS和Javascript；在内容上，提供网站最重要信息、比较重要信息和一般信息。

6.根据权利要求2所述的渐进增强的响应式网页设计方法，其特征在于，针对大屏幕设备提供服务包括：丰富的HTML，宽屏多列布局，大图片，丰富的CSS和Javascript；在内容上，提供丰富的信息展示。

7.根据权利要求1所述的渐进增强的响应式网页设计方法，其特征在于，其中所述步骤2）中的根据上述服务范围划分断点具体为:根据屏幕尺寸的宽度或高度划分多个断点，依据断点通过CSS实现自适应布局。

8.根据权利要求7所述的渐进增强的响应式网页设计方法，其特征在于，其中网站可根据实际需求增加或减少断点。

9.根据权利要求1所述的渐进增强的响应式网页设计方法，其特征在于，其中所述步骤3）中的针对不同断点确定响应式CSS规则和Javascript程序包括：设置实现灵活的网格以及灵活的标签，结合上述网格和标签调整断点值，选择性填充内容。