本发明属于网页设计技术领域，更具体地说，尤其涉及一种渐进增强的响应式网页设计方法。
背景技术：
如今，越来越多的人使用手机来浏览网页、聊微信、qq、手机购物、或使用各式各样有关生活及娱乐的手机应用。由于各种各样的移动设备开始出现在市场上，导致用户访问的方式开始发生变化，相应的网页设计开发技术也随之发生一些改变，可能设计师为了给一些使用移动设备的用户更好的访问体验而去专门设计一个网站，于是，一个专门为所有使用移动终端的访问者而设计的网页都被自动跳转。另一方面，如果把网站做成响应式的情况下，无论客户使用的是那种移动终端设备访问，网站都会自动调整显示效果，让每一个用户得到更好的访问体验。响应式网页的设计不仅能够满足各式各样移动终端设备的需求，更能让每一个用户都得到最佳的访问体验。然后，也有人认为，专门为每一种移动设备终端，比如说电脑，ipad，手机各自设计一个专门的网站，但是，根据现有的相关数据显示，被大家经常用到的的移动终端设备就有300多种以上，而我们的设计人员和开发人员不可能去设计300多种的不一样屏幕尺寸大小的网站。在这种情况下，响应式就表现出它的优势与价值。只需要设计一个的响应式网站，就可以带给不同终端用户最优质的访问体验。
响应式网页是今后网页设计新的发展方向。最近一些年，各种各样的移动互联网技术得到了广泛应用和不断升级，在对不同网站访问的媒介中，诞生了各种以智能手机、平板电脑等作为主要访问界面的移动设备，但是不同设备的不同尺寸使得原本在电脑上能够正常访问的网页在这些移动界质上访问上显得很紊乱，可能会造成操作不便或用户视觉体验不佳的结果。基于此尴尬近年来诞生的一一响应式网页设计，其定义为根据用户的个性化需求和应用环境主动做一系列裁减定制系统的显示和交互行为。响应式网站相比传统网站而言，有更好的灵活适应性，可以简化设计流程，代表了今后网站设计的新方向，目前越来越多的注重用户交互体验的网站都积极寻求向响应式网页做转变。
技术实现要素：
本发明的目的是为了解决现有技术中存在的缺点，而提出的一种渐进增强的响应式网页设计方法。
为实现上述目的，本发明提供如下技术方案：
一种渐进增强的响应式网页设计方法，包括如下步骤：
s1、首先设计一个非响应的布局，即页面宽度是固定的，然后设置页面在不同尺寸的客户端都按1∶1原样显示，即提供网页全视图浏览，禁止用户缩放页面；
s2、使用媒体查询可以使网页自动适应不同分辨率的终端；根据终端的屏幕尺寸和终端的特征划分网页源代码服务范围；
s3、根据上述绘制断点图，首先要确定断点，然后在对应的断点下方绘制网页布局缩略图，表示当视口大小达到该值时，将显示该布局的效果；
s4、针对不同断点确定响应式css规则和javascript程序。
优选的，所述断点图又分三种类型，分别是带有布局缩略图的断点图、带有次断点的断点图和展示css文件作用范围的断点图。
优选的，所述终端为手机或者平板电脑或者计算机。
优选的，所述平板电脑横向规格为1060px，手机屏幕规格为768px。
优选的，当媒体查询检测到平板电脑横向规格时，页面为左右显示比例分别为65％和30％，预留有5％为边距；当为手机屏幕时，页面左、右栏比例都是100％，以实现将左、右栏以全屏上下显示。
本发明的技术效果和优点：本发明提供的一种渐进增强的响应式网页设计方法，自适应于不同的设备，实现网站布局和内容与设备特点匹配，提高网站性能和增强用户体验。本发明以低分辨率设备为先，按设备分辨率增加，逐渐优化网页布局和内容展示，建立流动的网格，流动的标签，灵活的断点，并通过外部脚本选择性增加内容，实现布局和内容自适应于设备尺寸，减小不需要的页面加载，优化网页展示效果；通过css规则和辅助的脚本控制，实现灵活的布局，对小尺寸设备，加载较少数据，展示最重要的网站信息。随着设备尺寸增加，网页布局能够自适应与设备屏幕，并通过选择性的加载更多内容到网页源码中，达到充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合具体实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
一种渐进增强的响应式网页设计方法，包括如下步骤：
s1、首先设计一个非响应的布局，即页面宽度是固定的，然后设置页面在不同尺寸的客户端都按1∶1原样显示，即提供网页全视图浏览，禁止用户缩放页面；
s2、使用媒体查询可以使网页自动适应不同分辨率的终端；根据终端的屏幕尺寸和终端的特征划分网页源代码服务范围；所述终端为手机或者平板电脑或者计算机；所述平板电脑横向规格为1060px，手机屏幕规格为768px；当媒体查询检测到平板电脑横向规格时，页面为左右显示比例分别为65％和30％，预留有5％为边距；当为手机屏幕时，页面左、右栏比例都是100％，以实现将左、右栏以全屏上下显示；
s3、根据上述绘制断点图，首先要确定断点，然后在对应的断点下方绘制网页布局缩略图，表示当视口大小达到该值时，将显示该布局的效果；所述断点图又分三种类型，分别是带有布局缩略图的断点图、带有次断点的断点图和展示css文件作用范围的断点图；
s4、针对不同断点确定响应式css规则和javascript程序。
综上所述：本发明提供的一种渐进增强的响应式网页设计方法，自适应于不同的设备，实现网站布局和内容与设备特点匹配，提高网站性能和增强用户体验。本发明以低分辨率设备为先，按设备分辨率增加，逐渐优化网页布局和内容展示，建立流动的网格，流动的标签，灵活的断点，并通过外部脚本选择性增加内容，实现布局和内容自适应于设备尺寸，减小不需要的页面加载，优化网页展示效果；通过css规则和辅助的脚本控制，实现灵活的布局，对小尺寸设备，加载较少数据，展示最重要的网站信息。随着设备尺寸增加，网页布局能够自适应与设备屏幕，并通过选择性的加载更多内容到网页源码中，达到充分利用通信流量和优化网页展示效果的目的，可以优化网站性能和提升用户体验。
最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。