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

权利要求书

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像素的显示屏幕，右边内容浮动为多行一列，做右上角浮层浮动显示，点击所述浮层出现左边内容，默认只显示浮层图标。