一种移动端多屏等比例适配的方法技术

本发明专利技术涉及软件开发技术领域，具体涉及一种移动端多屏等比例适配的方法，依次包括步骤S1：接收浏览器发送的获取指定网页的请求；S2：获取移动端屏幕的设备像素缩放比值；S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。所述移动端多屏等比例适配的方法可对不同尺寸的移动端屏幕进行适配，以降低软件开发成本，提高用户体验。提高用户体验。提高用户体验。

【技术实现步骤摘要】
一种移动端多屏等比例适配的方法


[0001]本专利技术涉及软件开发
，尤其涉及一种移动端多屏等比例适配的方法。

技术介绍

[0002]随着移动端设备发展迅猛，手机尺寸越来越多，不但iphone出了好几个device-width(320p软件开发，375p软件开发，414p软件开发)等，android更时百花齐放。如果设计只提供一套设计稿，由于iPhone5s的屏幕比较小，iPhonePlus又太大，会使得界面变得太狭窄或留白过多。面对不同分辨率的手机，面对不同屏幕寸的手机，很难有比较好的办法来实现移动端高清、多屏适配。针对同一内容重复设计、开发，需耗费大量的人力、物力、资金、时间等，产生严重的资源浪费；基于不同屏幕终端各自孤立设计、开发的内容，后续的更新、维护极为不便，也难以保证内容的一致性；针对不同终端各自开发，难以保证相对一致的界面风格、产品体验，并且不便于资源的共享和管理；响应式设计实施难度大，需要针对多种情况编写开发代码，不仅对终端、浏览器要求较高，也不适应大量信息的频繁更新。因此，为了提高用户体检，节省各方面成本，对于不同屏幕尺寸下页面等比例适配，如果能用一套css搞定，就显得尤为重要。

技术实现思路

[0003]为解决上述技术问题，本专利技术的目的在于提供一种移动端多屏等比例适配的方法，便有降低软件开发成本，提高用户体验。
[0004]为达到上述技术效果，本专利技术采用了以下技术方案：
[0005]一种移动端多屏等比例适配的方法，具体包括以下步骤：
[0006]S1：接收浏览器发送的获取指定网页的请求；
[0007]S2：获取移动端屏幕的设备像素缩放比值；
[0008]S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；
[0009]S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。
[0010]进一步地，所述步骤S2中获取设备像素缩放比值的方法为通过通过JavaScript获取。
[0011]进一步地，所述弹性元素为像素单位。
[0012]进一步地，所述设备像素缩放比值等于屏幕宽度与设计图宽的比值。
[0013]与现有技术相比，本专利技术的有益效果为：
[0014]一方面，本专利技术提供的一种移动端多屏等比例适配的方法，首先通过接收终端设备上的浏览器发送的获取指定网页的请求，再通过JavaScript获移动端屏幕的设备像素缩放比值，根据获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对生成的视觉稿进行存储，最后通过对视觉稿中的弹性元素的单位进行转换，并生成最终效果图进行展示，便于对不同比例的显示屏进行适配，且显示效果较好。另一方面，本发
明提供的一种移动端多屏等比例适配的方法，通过将移动端的页面内任何需要弹性适配的元素的尺寸均换算为rem进行布局；当页面渲染时，根据页面有效宽度进行计算，并对应调整rem的大小，动态缩放以达到适配的效果，有效解决了因为页面宽度固定，无法满足大小屏展示效果的问题。
附图说明
[0015]图1为本专利技术一实施例提供的一种移动端多屏等比例适配的方法的工作流程图；
具体实施方式
[0016]下面将结合附图对本专利技术技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本专利技术的技术方案，因此只作为示例，而不能以此来限制本专利技术的保护范围。
[0017]如图1所示，本实施例提供的一种移动端多屏等比例适配的方法，在具体实施时，包括步骤1.一种移动端多屏等比例适配的方法，其特征在于，包括以下步骤：
[0018]S1：接收浏览器发送的获取指定网页的请求；
[0019]S2：获取移动端屏幕的设备像素缩放比值；具体地，设备像素缩放比值等于屏幕宽除以设计图宽得到数值，比如屏幕宽等于750px，设计图宽等于1000px，750除以1000得到0.75px，等于说是设计图的1px，在浏览器上展示的大小为0.75px。
[0020]S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；具体地，通过继承这个比例大小，采用rem的方法，继承html的font-size大小的方法去实现，设置html的font-size等于0.75px(屏幕的0.75px相当于设计图的1px),rem会继承html的font-size大小，所以在页面里面使用的1rem就等于设计图的1px，然后把得到的设计图和屏幕宽的比例乘以100，等于75，现在1rem等于设计图的100px,0.01rem等于设计图的1px，以得到多个不同尺寸的视觉稿。
[0021]S4：对视觉稿中的弹性元素的单位进行转换，并生成最终效果图进行展示。具体地，通过把得到的设计图和屏幕宽的比例乘以100，等于75，现在1rem等于设计图的100px,0.01rem等于设计图的1px。把所有的尺寸都转成百分比布局，那么所有不同宽度的页面都可以用采用一套css。最后只需要把html的font-size设置成document.documentElement.clientWidth/设计图宽度，则能够实现对不同尺寸的显示屏进行适配的目的。
[0022]以上实施例仅用以说明本专利技术的技术方案而非限制，尽管参照较佳实施例对本专利技术进行了详细说明，本领域的普通技术人员应当理解，可以对本专利技术的技术方案进行修改或者等同替换，而不脱离本专利技术技术方案的宗旨和范围，其均应涵盖在本专利技术的权利要求范围当中。本专利技术未详细描述的技术、形状、构造部分均为公知技术。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种移动端多屏等比例适配的方法，其特征在于，包括以下步骤：S1：接收浏览器发送的获取指定网页的请求；S2：获取移动端屏幕的设备像素缩放比值；S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。2.如权利要求1...

【专利技术属性】
技术研发人员：林宁，
申请(专利权)人：冠群信息技术南京有限公司，
类型：发明
国别省市：