(19)中华人民共和国国家知识产权局
(12)发明专利说明书
(10)申请公布号 CN 103500166 A
(43)申请公布日 2014.01.08
(21)申请号 CN201310370232.1
(22)申请日 2013.08.22
(71)申请人 合一网络技术(北京)有限公司
    地址 100080 北京市海淀区海淀大街8号中钢国际广场A座5层A、C区
(72)发明人 张金柱 姚键 潘柏宇 卢述奇
(74)专利代理机构
    代理人
(51)Int.CI
      G06F17/30
      G06F9/44
                                                                  权利要求说明书 说明书 幅图
(54)发明名称
      一种渐进增强的响应式网页设计方法
(57)摘要
      本发明公开一种渐进增强的响应式网页设计方法，涉及互联网网页设计领域。本发明可自适应于不同的设备，实现网站布局和内容与设备特点匹配，提高网站性能和增强用户体验。本发明以低分辨率设备为先，按设备分辨率增加，逐渐优化网页布局和内容展示，建立流动的网格，流动的标签，灵活的断点，并通过外部脚本选择性增加内容，实现布局和内容自适应于设备尺寸，减小不需要的页面加载，优化网页展示效果。其有益效果在于，可充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。
法律状态
法律状态公告日
法律状态信息javascript基本特点
法律状态
权 利 要 求 说 明 书
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程序包括：设置实现灵活的网格以及灵活的标签，结合上述网格和标签调整断点值，选择性填充内容。
说  明  书
技术领域
本发明涉及互联网领域，尤其涉及互联网网页设计、网页多终端自适应。
背景技术
伴随通信设备性能以及无线网络通信速度提升，以智能手机，便携式电脑为代表的智能终端数量增长迅速，其用户数量很快将超越台式电脑等非移动设备。用户通过互联网获取信息，主要基于网页浏览器，由于传统的网页设计较大程度上基于台式电脑而设计，其网页标签存在固定的宽度和高度，灵活性较低，当用低分辨率的智能设备浏览网页时，用户需要不断拖动才能看到网页呈现的全部信息，影响用户体验。虽然网站可以针对低分辨率设备设计新的网页，但由于设备种类多，尺寸复杂，同时网站需要维护多个网页版本，此种分散将消耗较大开发和维护成本，而且不利于网站搜索引擎优化（SEO）和网站品牌建设。此外，网站可以开发独立的针对于该网站的应用（APP），用户通过应用获取信息，但是独立开发新用仍需较大开发和维护成本。