CN114895993A - 一种基于显示屏幕智能自适应的设计方法 - Google Patents

一种基于显示屏幕智能自适应的设计方法 Download PDF

Info

Publication number
CN114895993A
CN114895993A CN202210066345.1A CN202210066345A CN114895993A CN 114895993 A CN114895993 A CN 114895993A CN 202210066345 A CN202210066345 A CN 202210066345A CN 114895993 A CN114895993 A CN 114895993A
Authority
CN
China
Prior art keywords
width
screen
display screen
layout
design method
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
CN202210066345.1A
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.)
Deming Comm Shanghai Co ltd
Original Assignee
Deming Comm Shanghai Co ltd
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 Deming Comm Shanghai Co ltd filed Critical Deming Comm Shanghai Co ltd
Priority to CN202210066345.1A priority Critical patent/CN114895993A/zh
Publication of CN114895993A publication Critical patent/CN114895993A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • 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)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了一种基于显示屏幕智能自适应的设计方法，包括：利用CSS3的MediaQuery，meta中增加viewport的设置，通过浏览器探测屏幕宽度；利用HTML5框架的@media做媒体自查询，根据屏幕宽度做断点，选择性加载样式表适配WebUI；利用流动布局和/或弹性布局的方式选择自适应布局；对于电脑端等大宽度设备将内容部分采用部分地使用固定宽度，对于小宽度设备采用自动宽度；利用相对宽度字体使文字随屏幕尺寸缩放实现更好的动态效果；使用适屏图片通过选择性样式表加载不同的适屏图片，使用SVG图形实现缩放。本发明适用于不同的显示屏幕，对前端开发实现灵活，节约了成本，模块低耦合，用户体验友好。

Description

一种基于显示屏幕智能自适应的设计方法
技术领域
本发明涉及前端设计技术领域，具体而言，涉及一种基于显示屏幕智能自适应的设计方法。
背景技术
随着无线网络技术的发展普及，越来越多的人使用移动终端设备。区别于PC端设备的大屏幕大信息量的特点，移动终端设备呈现不同的型式、不同的屏幕尺寸，如何让移动终端设备的浏览器更加友好地呈现终端界面，成为前端开发的焦点。
此外，如何节约开发成本，减少由于多套WEBUI开发造成的冗余错误、差异；以及如何提高加载效率，成为当前亟待解决的问题。
有鉴于此，特提出本发明。
发明内容
鉴于此，本发明的目的是基于显示屏幕智能适应的WebUI设计思路，包括基于不同终端设备的屏幕的自适应设计思路、布局方式和屏幕切换加载方式，以及基于此自适应设计的WebUI模板。
本发明利用响应性、自适应设计，前端开发实现灵活，节约成本，模块低耦合，用户体验友好。
本发明提供一种基于显示屏幕智能自适应的设计方法，包括以下步骤：
a、利用CSS3框架的MediaQuery模板，网页加载的meta中增加视窗viewport的设置，宽度设置为屏幕宽度(width＝device-width)，缩放比例为1.0(initial-scale＝1)，通过浏览器探测屏幕宽度；
b、利用HTML5框架的@media做媒体自查询，根据屏幕宽度做断点，从而选择性加载样式表，根据屏幕宽度适配WebUI，也减少了文件链接加载数量，提高加载速度；
c、利用流动布局和/或弹性布局的方式选择自适应布局；
d、对于电脑端等大宽度设备，结合JS和/或JQUERY框架结构，将内容部分采用部分地使用固定宽度，对于小宽度设备采用自动宽度；利用相对宽度字体，使文字随屏幕尺寸缩放，实现更好的动态效果；
使用适屏图片，通过选择性样式表加载不同的适屏图片，使用SVG图形实现缩放。以上要考虑浏览器兼容问题，灵活实现屏幕细节的设计。
进一步地，所述a步骤之前还包括：
使用的web服务器为lighttped服务器，浏览器引擎收到web服务器响应后加载项目文件。
进一步地，所述b步骤的所述选择性加载样式表的方法包括：
加载屏幕最大宽度1280px、768px、480px或320px的样式表。
进一步地，根据屏幕宽度做断点，所述断点设置在1280px、768px、480px、320px中的一个或多个位置。
进一步地，所述c步骤的所述选择自适应布局的方法包括：
利用左边内容固定宽度，右边内容不设置宽度的方式。
进一步地，所述c步骤的所述选择自适应布局的方法还包括：
对于大于1280像素的显示屏幕，右边内容为多行多列的，以多行多列显示。
进一步地，所述c步骤的所述选择自适应布局的方法还包括：
对于大于768像素小于1280像素的显示屏幕，左边内容做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标。
进一步地，所述c步骤的所述选择自适应布局的方法还包括：
对于小于768像素的显示屏幕，右边内容浮动为多行一列，做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标。
与现有技术相比，本发明的有益效果是：
本发明利用CSS3的MediaQuery模板，探测移动终端设备的屏幕宽度，再结合流动布局以及一些灵活的自适应设计，轻松地完成一套WebUI，适用于不同的显示屏幕，对前端开发实现灵活，节约了成本，模块低耦合，用户体验友好。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术用户员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。
在附图中：
图1是本发明一种基于显示屏幕智能自适应的设计方法的流程图；
图2是本发明实施例中WebUI基本框架的示意图；
图3是本发明实施例根据屏幕宽度做断点的示意图；
图4是本发明实施例选择自适应布局的示意图；
图5是本发明实施例对大于1280像素显示屏幕的布局方式图；
图6是本发明实施例对大于768像素小于1280像素显示屏幕的布局方式图；
图7是本发明实施例对小于768像素显示屏幕的布局方式图；
图8是本发明实施例自适应布局实现的实例效果图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本公开可能采用术语第一、第二、第三来描述各种信号，但这些信号不应限于这些术语。这些术语仅用来将同一类型的信号彼此区分开。例如，在不脱离本公开范围的情况下，第一信号也可以被称为第二信号，类似地，第二信号也可以被称为第一信号。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
本发明实施例利用响应性、自适应设计，前端开发实现灵活，节约成本，模块低耦合，用户体验友好。参见图2所示，为本发明实施例中WebUI基本框架的示意。
本发明实施例提供一种基于显示屏幕智能自适应的设计方法，参见图1所示，包括以下步骤：
a、利用CSS3框架的MediaQuery模板，网页加载的meta中增加视窗viewport的设置，宽度设置为屏幕宽度(width＝device-width)，缩放比例为1.0(initial-scale＝1)，通过浏览器探测屏幕宽度；
<meta name＝″viewport″content＝″width＝device-width，initial-scale＝l″>
b、利用HTML5框架的@media做媒体自查询，根据屏幕宽度做断点，参见图3所示，从而选择性加载样式表，根据屏幕宽度适配WebUI，也减少了文件链接加载数量，提高加载速度；
Figure BDA0003480222550000051
c、利用流动布局和/或弹性布局的方式选择自适应布局，参见图4所示；
优选地，所述c步骤的所述选择自适应布局的方法，包括：
利用左边内容固定宽度，右边内容不设置宽度的方式；
对于电脑端大于1280像素的显示屏幕，右边内容为多行多列的，以多行多列显示，参见图5所示；
对于终端设备平板大于768像素小于1280像素的显示屏幕，左边内容做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标，参见图6所示；
对于像素相比平板更小的手机小于768像素的显示屏幕，右边内容浮动为多行一列，做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标，参见图7所示；
具体地，上述设计理念也在引用2010年伊森·马科特(Ethan Marcotte)提出的术语“自适应网页设计”(响应性网页设计)的基础上，随着网页技术的完善，实现中更多地融入了html5，CSS3的显示效果，做出更加优质的浮层效果，以及更人性化的实现，实现的实例效果参见图8所示；
d、对于电脑端等大宽度设备，结合JS和/或JQUERY框架结构，将内容部分采用部分地使用固定宽度，对于小宽度设备采用自动宽度；利用相对宽度字体，使文字随屏幕尺寸缩放，实现更好的动态效果；
使用适屏图片，通过选择性样式表加载不同的适屏图片，使用SVG图形实现缩放。以上要考虑浏览器兼容问题，灵活实现屏幕细节的设计。
所述a步骤之前还包括：
使用的web服务器为lighttped服务器，浏览器引擎收到web服务器响应后加载项目文件。
所述b步骤的所述选择性加载样式表的方法包括：
加载屏幕最大宽度1280px、768px、480px或320px的样式表。
根据屏幕宽度做断点，所述断点设置在1280px、768px、480px、320px中的一个或多个位置。
本发明实施例利用CSS3的MediaQuery模板，探测移动终端设备的屏幕宽度，再结合流动布局以及一些灵活的自适应设计，轻松地完成一套WebUI，适用于不同的显示屏幕，对前端开发实现灵活，节约了成本，模块低耦合，用户体验友好。
至此，已经结合附图所示的优选实施方式描述了本发明的技术方案，但是，本领域技术用户员容易理解的是，本发明的保护范围显然不局限于这些具体实施方式。在不偏离本发明的原理的前提下，本领域技术用户员可以对相关技术特征做出同的更改或替换，这些更改或替换之后的技术方案都将落入本发明的保护范围之内。
以上所述仅为本发明的优选实施例，并不用于限制本发明；对于本领域的技术用户员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、同替换、改进，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于显示屏幕智能自适应的设计方法，其特征在于，包括以下步骤：
a、利用CSS3框架的MediaQuery模板，网页加载的meta中增加视窗viewport的设置，宽度设置为屏幕宽度，缩放比例为1.0，通过浏览器探测屏幕宽度；
b、利用HTML5框架的@media做媒体自查询，根据屏幕宽度做断点，选择性加载样式表，根据屏幕宽度适配WebUI；
c、利用流动布局和/或弹性布局的方式选择自适应布局；
d、对于电脑端等大宽度设备，结合JS和/或JQUERY框架结构，将内容部分采用部分地使用固定宽度，对于小宽度设备采用自动宽度；利用相对宽度字体，使文字随屏幕尺寸缩放，实现更好的动态效果；
使用适屏图片，通过选择性样式表加载不同的适屏图片，使用SVG图形实现缩放。
2.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述a步骤之前还包括：
浏览器引擎收到web服务器响应后加载项目文件。
3.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述b步骤的所述选择性加载样式表的方法包括：
加载屏幕最大宽度1280px、768px、480px或320px的样式表。
4.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述b步骤的所述根据屏幕宽度做断点的方法包括：
所述断点设置在1280px、768px、480px、320px中的一个或多个位置。
5.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述c步骤的所述选择自适应布局的方法包括：
利用左边内容固定宽度，右边内容不设置宽度的方式。
6.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述c步骤的所述选择自适应布局的方法还包括：
对于大于1280像素的显示屏幕，右边内容为多行多列的，以多行多列显示。
7.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述c步骤的所述选择自适应布局的方法还包括：
对于大于768像素小于1280像素的显示屏幕，左边内容做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标。
8.根据权利要求1所述的基于显示屏幕智能自适应的设计方法，其特征在于，所述c步骤的所述选择自适应布局的方法还包括：
对于小于768像素的显示屏幕，右边内容浮动为多行一列，做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标。
CN202210066345.1A 2022-01-20 2022-01-20 一种基于显示屏幕智能自适应的设计方法 Pending CN114895993A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210066345.1A CN114895993A (zh) 2022-01-20 2022-01-20 一种基于显示屏幕智能自适应的设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210066345.1A CN114895993A (zh) 2022-01-20 2022-01-20 一种基于显示屏幕智能自适应的设计方法

Publications (1)

Publication Number Publication Date
CN114895993A true CN114895993A (zh) 2022-08-12

Family

ID=82715713

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210066345.1A Pending CN114895993A (zh) 2022-01-20 2022-01-20 一种基于显示屏幕智能自适应的设计方法

Country Status (1)

Country Link
CN (1) CN114895993A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术（北京）有限公司 一种网页自适应布局方法及装置
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法
CN106327550A (zh) * 2016-08-18 2017-01-11 乐视控股（北京）有限公司 浏览器主页推荐网站的图标生成方法及装置
CN112800368A (zh) * 2021-01-25 2021-05-14 广州芯德通信科技股份有限公司 一种基于自适应机制的路由设备网页布局方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术（北京）有限公司 一种网页自适应布局方法及装置
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法
CN106327550A (zh) * 2016-08-18 2017-01-11 乐视控股（北京）有限公司 浏览器主页推荐网站的图标生成方法及装置
CN112800368A (zh) * 2021-01-25 2021-05-14 广州芯德通信科技股份有限公司 一种基于自适应机制的路由设备网页布局方法

Similar Documents

Publication Publication Date Title
US20100281402A1 (en) Software-based asynchronous tiled backingstore
CN106502659B (zh) 一种移动设备网页单页面的布局方法及系统
CN104050185A (zh) 一种页面内容缩放显示处理方法及装置
US20120266104A1 (en) Method and Apparatus of Scrolling a Document Displayed in a Browser Window
CN105069060B (zh) 一种html文档分页排版方法
CN104360882A (zh) 一种浏览器中对网页中图片进行显示方法和装置
CN106126760A (zh) 一种web网页图片优化的方法
CN105930464B (zh) Web富媒体跨屏适配方法和装置
CN104834637A (zh) 网页图片展示方法及装置
JP2012008686A (ja) 情報処理装置および方法、並びにプログラム
CN103853482A (zh) 一种视频缩放的方法及装置
US9548042B2 (en) Responsive document breakpoints systems and methods
EP3408752B1 (en) Object management and visualization using a computing device
CN103488777A (zh) 一种调节网页展示效果的方法及系统
CN102541876A (zh) 浏览网页的方法、装置、服务器和移动终端
CN101573684B (zh) 对沿着滚动方向的滚动引起的改变进行可视化的方法
US20150121217A1 (en) Method and system for automatic invocation of guided reading tutorial based on account activity
CN110019037A (zh) 一种pdf文件展示方法、装置、设备及存储介质
CN103513875A (zh) 电子书自动跨页的方法
CN103092989A (zh) 适应终端屏幕的图片显示方法及设备
US20150121206A1 (en) Method and system for a single tap gesture advancement to next content portion
US20150121204A1 (en) Method and system for a visual indicator a displayed page enablement for guided reading
CN114895993A (zh) 一种基于显示屏幕智能自适应的设计方法
CN105577518A (zh) 一种在即时通信中显示网址对应信息的方法及电子设备
EP2801920A1 (en) Method and apparatus for displaying web page

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