[发明专利]一种基于显示屏幕智能自适应的设计方法

说明书

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

技术领域

本发明涉及前端设计技术领域，具体而言，涉及一种基于显示屏幕智能自适应的设计方法。

背景技术

随着无线网络技术的发展普及，越来越多的人使用移动终端设备。区别于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像素的显示屏幕，右边内容为多行多列的，以多行多列显示。