[发明专利]一种渐进增强的响应式网页设计方法

说明书

技术领域

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

背景技术

伴随通信设备性能以及无线网络通信速度提升，以智能手机，便携式电脑为代表的智能终端数量增长迅速，其用户数量很快将超越台式电脑等非移动设备。用户通过互联网获取信息，主要基于网页浏览器，由于传统的网页设计较大程度上基于台式电脑而设计，其网页标签存在固定的宽度和高度，灵活性较低，当用低分辨率的智能设备浏览网页时，用户需要不断拖动才能看到网页呈现的全部信息，影响用户体验。虽然网站可以针对低分辨率设备设计新的网页，但由于设备种类多，尺寸复杂，同时网站需要维护多个网页版本，此种分散将消耗较大开发和维护成本，而且不利于网站搜索引擎优化（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规则和辅助的脚本控制，实现灵活的布局，对小尺寸设备，加载较少数据，展示最重要的网站信息。随着设备尺寸增加，网页布局能够自适应与设备屏幕，并通过选择性的加载更多内容到网页源码中，达到充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。

附图说明