CN109471628A - 一种弹性响应式网页数据设定方法 - Google Patents

一种弹性响应式网页数据设定方法 Download PDF

Info

Publication number
CN109471628A
CN109471628A CN201811274653.3A CN201811274653A CN109471628A CN 109471628 A CN109471628 A CN 109471628A CN 201811274653 A CN201811274653 A CN 201811274653A CN 109471628 A CN109471628 A CN 109471628A
Authority
CN
China
Prior art keywords
width
viewport
data setting
setting method
web data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201811274653.3A
Other languages
English (en)
Inventor
程国艮
郝雁华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chinese Translation Language Through Polytron Technologies Inc
Original Assignee
Chinese Translation Language Through Polytron Technologies Inc
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Chinese Translation Language Through Polytron Technologies Inc filed Critical Chinese Translation Language Through Polytron Technologies Inc
Priority to CN201811274653.3A priority Critical patent/CN109471628A/zh
Publication of CN109471628A publication Critical patent/CN109471628A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种弹性响应式网页数据设定方法
技术领域
本发明属于网页设计开发技术领域，具体涉及一种弹性响应式网页设计方法。
背景技术
响应式网站设计（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 加上常规的文本折行行为，都可以实现这一点；
6）、在使用多列文本时，指定列宽 column-width而不指定列数 column-count，这样它就可以在较小的屏幕上自动显示为单列布局；
7）、巧用原声CSS 内置计算函数Calc（），例如把背景图片随终端设备定位background-position: calc(100% - 20px) calc(100% - 10px)。
本发明的优点和有益效果为：不需要在不同设备上去覆盖媒体查询里同样数量的声明，减轻了媒体查询所产生的维护成本。解决了媒体查询只能修补某个特定分辨率下的特定问题的局限性，扩大了响应式网页设计方法的适用范围。
具体实施方式
下面结合实施例对本发明作进一步说明。
实施例1
一种弹性响应式网页设计方法，所述方法尽最大可能实现弹性可伸缩的布局，包括如下内容：
1）、使用百分比长度取代固定长度；
2）、为了在较大分辨率下得到固定宽度，使用 max-width取代 width；
3）、为替换元素设置一个 max-width，值为 100%；
4）、设置background-size: cover 这个属性，以便使背景图片能够完整地铺满一个容器，而不管容器的尺寸如何变化；
5）、当图片等网页元素以行列式进行布局时，让视口的宽度来决定列的数量，通过弹性盒布局（即 Flexbox）来实现这一点；
6）、在使用多列文本时，指定 column-width；
7）、视图容器采用calc() 替代auto。
实施例2
一种弹性响应式网页设计方法，所述方法尽最大可能实现弹性可伸缩的布局，包括如下内容：
1）、使用视口相关的单位（vw、vh、vmin 和 vmax）来取代固定长度；
2）、为了在较大分辨率下得到固定宽度，使用 max-width取代 width；
3）、为替换元素设 置一个 max-width，值为 100%；
4）、设置background-size: cover 这个属性，以便使背景图片能够完整地铺满一个容器，而不管容器的尺寸如何变化；
5）、当图片等网页元素以行列式进行布局时，让视口的宽度来决定列的数量，通过display: inline-block 加上常规的文本折行行为，来实现这一点；
6）、在使用多列文本时，指定 column-width。
最后应说明的是：显然，上述实施例仅仅是为清楚地说明本发明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引伸出的显而易见的变化或变动仍处于本发明的保护范围之中。

Claims (4)

1.一种弹性响应式网页数据设定方法，其特征在于：所述方法能够实现弹性可伸缩的布局，具体包括如下内容：
1）、使用百分比长度或者视口相关的单位来取代固定长度；
2）、为了在较大分辨率下得到固定宽度，使用 max-width取代 width；
3）、为替换元素设置一个 max-width，值为 100%；
4）、设置background-size: cover 属性，以便使背景图片能够完整地铺满一个容器，而不管容器的尺寸如何变化；
5）、当网页元素以行列式进行布局时，让视口的宽度来决定列的数量；
6）、在使用多列文本时，指定列宽的值，以在较小的屏幕上自动显示为单列布局。
2.根据权利要求1所述的一种弹性响应式网页数据设定方法，其特征在于：所述视口相关的单位包括vw、vh、vmin 和 vmax。
3.根据权利要求1所述的一种弹性响应式网页数据设定方法，其特征在于：所述替换元素包括 img、object、video、iframe。
4.根据权利要求1所述的一种弹性响应式网页数据设定方法，其特征在于：所述步骤5）中，采用弹性盒布局或者display: inline-block 加上常规的文本折行行为来实现以视口的宽度决定列的数量。
CN201811274653.3A 2018-10-30 2018-10-30 一种弹性响应式网页数据设定方法 Pending CN109471628A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811274653.3A CN109471628A (zh) 2018-10-30 2018-10-30 一种弹性响应式网页数据设定方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811274653.3A CN109471628A (zh) 2018-10-30 2018-10-30 一种弹性响应式网页数据设定方法

Publications (1)

Publication Number Publication Date
CN109471628A true CN109471628A (zh) 2019-03-15

Family

ID=65666627

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811274653.3A Pending CN109471628A (zh) 2018-10-30 2018-10-30 一种弹性响应式网页数据设定方法

Country Status (1)

Country Link
CN (1) CN109471628A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110334163A (zh) * 2019-05-22 2019-10-15 平安国际智慧城市科技股份有限公司 大数据的地图背景优化方法、装置、设备及存储介质
CN112667233A (zh) * 2020-12-22 2021-04-16 猫岐智能科技（上海）有限公司 屏幕尺寸的ui设计方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104123362A (zh) * 2014-07-18 2014-10-29 华中师范大学 一种面向多终端设备的网页适应性布局方法
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法
US20160232151A1 (en) * 2015-02-11 2016-08-11 Trivantis Corporation, Inc. Responsive course design system and method

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104123362A (zh) * 2014-07-18 2014-10-29 华中师范大学 一种面向多终端设备的网页适应性布局方法
US20160232151A1 (en) * 2015-02-11 2016-08-11 Trivantis Corporation, Inc. Responsive course design system and method
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
图解AI: "[响应式布局]响应式布局技巧", 《HTTPS://BLOG.CSDN.NET/BAIHUAXIU123/ARTICLE/DETAILS/52762389》 *
黑马程序员: "《HTML5移动Web开发》", 31 August 2017, 中国铁道出版社 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110334163A (zh) * 2019-05-22 2019-10-15 平安国际智慧城市科技股份有限公司 大数据的地图背景优化方法、装置、设备及存储介质
CN112667233A (zh) * 2020-12-22 2021-04-16 猫岐智能科技（上海）有限公司 屏幕尺寸的ui设计方法

Similar Documents

Publication Publication Date Title
CN105740315B (zh) 一种多种屏幕响应式网页布局调整的方法
CN103412923B (zh) 一种网页浏览状态切换的方法及网页浏览器
CN104063806B (zh) 在移动终端上实时查看电力***单线图的方法
CN109471628A (zh) 一种弹性响应式网页数据设定方法
CN104537002A (zh) 一种css兼容性调优的方法及***
CN104317931B (zh) 网页标题的确定方法和装置
CN102937986A (zh) 一种网站信息结构的动态调整方法及***
CN104679432A (zh) 一种基于移动端浏览器跨平台人机交互浏览图片的方法
CN104021772A (zh) 液晶显示面板的液晶像素电路及其驱动方法
CN103208259B (zh) 显示面板
CN102880391B (zh) 改变浏览器窗口显示的内容的显示控制设备及方法
CN101221501B (zh) 一种浏览器的文件上传控件的生成方法及生成装置
CN103390067A (zh) 用于互联网实体分析的数据处理方法和装置
CN102521373A (zh) 一种跨网站搜索的方法及其网站***
CN103152621B (zh) 推荐视频的配置方法、显示方法和播放方法
CN103151016B (zh) 一种显示面板维修电路
KR20150106304A (ko) 정전기 방전 회로와 이를 포함하는 액정 디스플레이 장치
KR20140075511A (ko) 전자식 학습지를 이용한 학습방법
CN101645095A (zh) 一种浏览器在屏数据更新的方法、终端和服务器
CN104318889B (zh) 显示面板的驱动方法及驱动电路、显示装置
CN103501470A (zh) 网络数据筛选方法及装置
CN109388647A (zh) 一种基于web的数据填报方法及***
CN104951574A (zh) 一种高比率压缩布线版图数据量的方法
CN103500105A (zh) 一种可视化配置的方法及终端
CN207966208U (zh) 一种高级语言程序设计中冒泡算法的演示装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20190315

RJ01 Rejection of invention patent application after publication