[发明专利]一种弹性响应式网页数据设定方法

说明书

本发明公开一种弹性响应式网页数据设定方法，尽最大可能实现弹性可伸缩的布局，具体包括如下内容：使用百分比长度或者视口相关的单位取代固定长度；为了在较大分辨率下得到固定宽度，使用max‑width取代width；为替换元素设置一个max‑width，值为100%；设置background‑size:cover这个属性；当网页元素以行列式进行布局时，让视口的宽度来决定列的数量，通过弹性盒布局或者display:inline‑block加上常规的文本折行行为来实现这一点；在使用多列文本时，指定列宽column‑width以便在较小的屏幕上自动显示为单列布局。本发明所述方法能够减轻媒体查询所产生的维护成本，拓展响应式网页设计方法的适用范围。

技术领域

本发明属于网页设计开发技术领域，具体涉及一种弹性响应式网页设计方法。

背景技术

响应式网站设计（Responsive Web Design，RWD）是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的终端设备环境进行相对应的布局。

响应式网站设计的目标是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同终端设备；换句话说，页面应该有能力去自动响应用户的终端设备环境。响应式网页设计就是一个网站能够兼容多个终端设备，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

近年来随着2K、4k屏幕的普及，常见的响应式网页设计是用媒体查询（MediaQuery）规则来修补网站在这些分辨率下出现的问题。然而每次对 CSS 代码的修改都要求我们逐一核对这些媒体查询是否需要做配合修改，媒体查询越多CSS 代码冗余维护成本就会变得越来越高，甚至可能要求我们反过来修改这些媒体查询的设置。这并不是说媒体查询是一种不良实践，而是应该把它作为最后的修复手段。

媒体的工作原理基于某几个特定的断点，不能以一种连续的方式来修复问题。如果大部分样式代码并不是以弹性的方式来编写的，那么媒体查询能做的只是修补某个特定分辨率下的特定问题而已。然而这一点常常被我们忽略，导致后患无穷。

发明内容

为了解决现有的响应式网页设计技术存在多样化终端适配冗余问题，本发明提供一种弹性响应式网页设计方法，所述方法根据终端设备自身来大小使用及少量媒体查询方案，尽最大努力实现弹性可伸缩的布局，并在多样化终端设备实现轻便高效渲染。

为实现上述目标，本发明采用以下技术方案：

一种弹性响应式网页设计方法，所述尽最大可能实现弹性可伸缩的布局。具体包括如下内容：

1）、使用百分比长度或者视口相关的单位（vw、vh、vmin 和 vmax）来取代固定长度；

2）、为了在较大分辨率下得到固定宽度，使用 max-width取代 width，因为max-width可以适应较小的分辨率，而无需使用媒体查询；

3）、为替换元素（比如 img、object、video、iframe 等）设 置一个 max-width，值为100%；

4）、设置background-size: cover 这个属性，以便使背景图片能够完整地铺满一个容器，而不管容器的尺寸如何变化；

5）、当图片等网页元素以行列式进行布局时，让视口的宽度来决定列的数量，通过弹性盒布局（即 Flexbox）或者 display: inline-block 加上常规的文本折行行为，都可以实现这一点；