(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210066345.1 (22)申请日 2022.01.20 (71)申请人 德明通讯 （上海） 股份有限公司 地址 201203 上海市浦东 新区中国 （上海） 自由贸易试验区碧波路250号2幢404 室 (72)发明人 樊琳琪　 (74)专利代理 机构 北京中索 知识产权代理有限 公司 11640 专利代理师 高海涛 (51)Int.Cl. G06F 9/451(2018.01) G06F 8/20(2018.01) G06F 8/38(2018.01) (54)发明名称 一种基于显示屏幕智能自适应的设计方法 (57)摘要 本发明提供了一种基于显示屏幕智能自适 应的设计方法， 包括： 利用CSS3的MediaQuery， meta中增加viewport的设置， 通过浏览器探测屏 幕宽度； 利用HTML5框架的@media做媒体自查询， 根据屏幕宽度做断点， 选择性加载样式表适配 WebUI； 利用流动布局和/或弹性布局的方式选 择 自适应布局； 对于电脑端等大宽度设备将内容部 分采用部分地使用固定宽度， 对于小宽度设备采 用自动宽度； 利用相对宽度字体使文字随屏幕尺 寸缩放实现更好的动态效果； 使用适屏图片通过 选择性样式表加载不同的适屏图片， 使用SVG图 形实现缩放。 本发明适用于不同的显示屏幕， 对 前端开发实现灵活， 节约了成本， 模块低耦合， 用 户体验友好。 权利要求书1页 说明书4页 附图5页 CN 114895993 A 2022.08.12 CN 114895993 A 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像素的显示屏幕， 右边内容浮动为多行一列， 做右上角浮层浮动显示， 点 击所述浮层出现左边内容， 默认只显示 浮层图标。权　利　要　求　书 1/1 页 2 CN 114895993 A 2一种基于显示屏幕智能自适应的设计方 法 技术领域 [0001]本发明涉及前端设计技术领域， 具体而言， 涉及一种基于显示屏幕智能自适应的 设计方法。 背景技术 [0002]随着无线网络技术的发展普及， 越来越多的人使用移动终端设备。 区别于PC端设 备的大屏幕大信息量的特点， 移动终端设备呈现不同的型式、 不同的屏幕尺寸， 如何让移动 终端设备的浏览器更加友好 地呈现终端界面， 成为前端开发的焦点。 [0003]此外， 如何节约开发成本， 减少由于多套WEBUI开发造 成的冗余错误、 差异； 以及如 何提高加载效率， 成为当前亟 待解决的问题。 [0004]有鉴于此， 特提出本发明。 发明内容 [0005]鉴于此， 本 发明的目的是基于显示屏幕智能适应的WebUI设计思 路， 包括基于不同 终端设备 的屏幕的自适应设计思路、 布局方式和屏幕切换加载方式， 以及基于此自适应设 计的WebUI模板 。 [0006]本发明利用响应性、 自适应设计， 前端开发实现灵活， 节约成本， 模块低耦合， 用户 体验友好。 [0007]本发明提供一种基于 显示屏幕智能自适应的设计方法， 包括以下步骤： [0008]a、 利用CSS3框架 的MediaQuery模板， 网页加载的meta中增加视窗viewport 的设 置， 宽度设置为屏幕宽度(widt h＝devic e‑width)， 缩放比例为1.0(initial ‑scale＝1)， 通 过浏览器探测屏幕宽度； [0009]b、 利用HTML5框架的@media做媒体自查询， 根据屏幕宽度做断点， 从而选择性加载 样式表， 根据屏幕宽度适配WebUI， 也减少了文件链接加载 数量， 提高加载速度； [0010]c、 利用流动布局 和/或弹性布局的方式选择自适应布局； [0011]d、 对于电脑端等大宽度设备， 结合JS和/ 或JQUERY框架结构， 将内容部分采用部分 地使用固定宽度， 对于小宽度设备采用自动宽度； 利用相对宽度字体， 使文字随屏幕尺寸缩 放， 实现更好的动态效果； [0012]使用适屏图片， 通过选择性样式表加载不同的适屏图片， 使用SVG图形实现缩放。 以上要考虑 浏览器兼容问题， 灵活实现屏幕细节的设计。 [0013]进一步地， 所述a步骤之前还 包括： [0014]使用的web服务器为lighttped服务器， 浏览器引擎收到web服务器响应后加载项 目文件。 [0015]进一步地， 所述b步骤的所述选择性加载样式表的方法包括： [0016]加载屏幕最大宽度1280px、 768px、 480px或320px的样式表。 [0017]进一步地， 根据屏幕宽度做断点， 所述 断点设置在1280px、 768px、 480px、 320px中说　明　书 1/4 页 3 CN 114895993 A 3