移动端界面的适配方法、装置、移动终端及存储介质制造方法及图纸

本发明专利技术适用计算机技术领域，提供了一种移动端界面的适配方法、装置、移动终端及存储介质，该方法包括：根据预设的主流设备独立像素、预设的响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素和调整后的文字元素，生成设计稿对应的移动端界面并输出，从而通过多种调整方式的结合，有效地移动端界面适配的灵活性，进而提高了移动端界面适配效果。

【技术实现步骤摘要】
移动端界面的适配方法、装置、移动终端及存储介质
本专利技术属于计算机
，尤其涉及一种移动端界面的适配方法、装置、移动终端及存储介质。
技术介绍
移动终端的界面适配是指设计一种适配方案，在主流移动终端上都能达到比较好的效果，使用户看起来比较舒适，同时也不违背终端大屏幕的初衷，即在更大的终端上用户可以在不翻页的情况下看到更多的内容。目前移动终端的飞速发展，追求的是在5寸到6寸的移动终端上达到很好的效果，同时在尺寸更大的平板设备上也能看起来舒适。由于移动终端的屏幕分辨率、屏幕尺寸、屏幕长宽比各不相同，还有移动终端上系统、浏览器的多样性，目前移动终端的界面适配仍然没有一种方案能够很好地适配大部分的主流移动终端，界面适配的灵活性不足，导致适配效果不佳。
技术实现思路
本专利技术的目的在于提供一种移动端界面的适配方法、装置、移动终端及存储介质，旨在解决由于现有技术无法提供一种有效的移动端界面的适配方法，导致移动端界面的适配效果不佳、用户体验不佳的问题。一方面，本专利技术提供了一种移动端界面的适配方法，所述方法包括下述步骤：根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整；根据预设的字体格式，对所述设计稿上的文字元素进行调整；根据调整后的所述图片元素和调整后的所述文字元素，生成所述设计稿对应的移动端界面并输出。另一方面，本专利技术提供了一种移动端界面的适配装置，所述装置包括：图片调整单元，用于根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整；字体调整单元，用于根据预设的字体格式，对所述设计稿上的文字元素进行调整；以及移动界面生成单元，用于根据调整后的所述图片元素和调整后的所述文字元素，生成所述设计稿对应的移动端界面并输出。另一方面，本专利技术还提供了一种移动终端，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述移动端界面的适配方法所述的步骤。另一方面，本专利技术还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述移动端界面的适配方法所述的步骤。本专利技术在根据预设的主流设备独立像素、预设的响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素和调整后的文字元素，生成设计稿对应的移动端界面并输出，从而通过主流设备独立像素、响应式布局方式、字体格式等多种方式结合，有效地提高了移动端界面的适配灵活性，进而提高了移动端界面的适配效果，提高了用户体验。附图说明图1是本专利技术实施例一提供的移动端界面的适配方法的实现流程图；图2是本专利技术实施例二提供的移动端界面的适配装置的结构示意图；图3是本专利技术实施例二提供的移动端界面的适配装置的优选结构示意图；以及图4是本专利技术实施例三提供的移动终端的结构示意图。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。以下结合具体实施例对本专利技术的具体实现进行详细描述：实施例一：图1示出了本专利技术实施例一提供的移动端界面的适配方法的实现流程，为了便于说明，仅示出了与本专利技术实施例相关的部分，详述如下：在步骤S101中，根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整。本专利技术实施例适用于手机、平板电脑等移动设备。UI设计人员可先根据目前主流移动终端的分辨率，设计相应的固定尺寸的设计稿，例如，当主流移动终端的分辨率为1920*1080，设计1920*1080尺寸的设计稿，设计稿上标注了图片元素、文字元素的相关信息，例如图片元素的宽度、高度和位置等，又如文字元素的字体、位置等。UI设计人员完成设计稿后，将设计稿交给前端工程师，因此，此时的用户为前端工程师，用户可通过对设计稿上的图片元素、文字元素进行调整，得到设计稿对应的移动端页面。在本专利技术实施例中，可根据目前主流的移动终端(例如iphone8或iphone8s)的设备独立像素，预先设置主流设备独立像素。根据主流设备独立像素对设计稿上的图片元素进行调整时，可判断图片元素的宽度与主流设备独立像素的宽度是否一致，当一致时，根据主流设备独立像素的宽度与设计稿的宽度之间的比值，对图片元素的宽度、高度进行调整，以便得到较好的界面适配效果。作为示例地，当主流设备独立像素的宽度为360px、设计稿的宽度为1080px时，得到主流设备独立像素的宽度与设计稿的宽度之间的比值为1:3，当图片元素在设计稿中标注的宽度刚好是360px时，按照1:3的比例，可以将图片元素在移动端界面中的宽度设置为120px。优选地，当图片元素的宽度与主流设备独立像素宽度不一致时，判断图片元素的宽度是否小于预设的设备独立像素宽度阈值，当小于时，保持图片元素的宽度和不变，即移动端界面上图片元素的宽度和高度分别与设计稿上该图片元素的宽度和高度相同，从而使得尺寸较小的图片元素不因为移动终端的变化而发生尺寸变化，有效地提高了移动端界面的适配效果。进一步优选地，当图片元素的宽度与主流设备独立像素宽度不一致、且图片元素的宽度不小于设备独立像素宽度阈值时，根据预设的百分比，对图片圆度的宽度、高度进行调整，从而使得尺寸较大的图片元素按照固定的百分比进行尺寸变化，有效地提高了移动端界面的适配效果。此外，对于设计稿上标注了尺寸不固定的图片元素(例如，设计稿上标注图片元素的宽度占移动端界面宽度的30％，则该图片元素的尺寸是不固定的)，也可通过固定的百分比进行尺寸调整。其中，预设的百分比可根据设计稿的尺寸与移动端界面的尺寸确定，在此不进行限制。在步骤S102中，根据预设的字体格式，对设计稿上的文字元素进行调整。在本专利技术实施例中，可通过rem设置设计稿上的文字元素在移动端界面的大小，rem是CSS3中的一个度量单位，通过rem来对设计稿上的文字元素进行调整，以有效地提高文字元素的调整效果和效率。在步骤S103中，根据调整后的图片元素和调整后的文字元素，生成设计稿对应的移动端界面并输出。在本专利技术实施例中，可将调整后的图片元素、文字元素，对应地输出在移动终端的显示屏幕上，得到设计稿对应的移动端界面。优选地，在根据主流设备独立像素对设计稿上的图片元素进行调整时，当图片元素为设计稿的底部操作栏、且调整后的设计稿要求恰好不满移动终端的显示屏幕时，通过响应式布局方式来为该图片元素设计并调用对应的宽度、高度，从而使得该图片元素在随移动终端显示屏幕的尺寸变化发生变化时保持较小的变化，有效地提高了移动端界面的适配效果。在本专利技术实施例中，在根据预设的主流设备独立像素、响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素、文字元素，生成设计稿对应的移动端界面并输出，从而通过多种调整方式的结合有效地提高了移动端界面的适配灵活性，进而提高了移动端界面的适配效果，提高了用户体验。实施例二：图2示出了本专利技术实施例二提供的移动端界面的适配装置的结构，为了便于说明，仅示出了与本发本文档来自技高网...

【技术保护点】
1.一种移动端界面的适配方法，其特征在于，所述方法包括下述步骤：根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整；根据预设的字体格式，对所述设计稿上的文字元素进行调整；根据调整后的所述图片元素和调整后的所述文字元素，生成所述设计稿对应的移动端界面并输出。

【技术特征摘要】
1.一种移动端界面的适配方法，其特征在于，所述方法包括下述步骤：根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整；根据预设的字体格式，对所述设计稿上的文字元素进行调整；根据调整后的所述图片元素和调整后的所述文字元素，生成所述设计稿对应的移动端界面并输出。2.如权利要求1所述的方法，其特征在于，对预先设计好的设计稿上的图片元素进行调整的步骤，包括：判断所述图片元素的宽度与所述主流设备独立像素的宽度是否一致；当所述图片元素的宽度与所述主流设备独立像素的宽度一致时，根据所述主流设备独立像素的宽度与所述设计稿的宽度之间的比值，对所述图片元素的宽度、高度进行调整。3.如权利要求1所述的方法，其特征在于，对预先设计好的设计稿上的图片元素进行调整的步骤，还包括：当所述图片元素的宽度与所述主流设备独立像素的宽度不一致时，判断所述图片元素的宽度是否小于预设的设备独立像素宽度阈值；当所述图片元素的宽度小于所述设备独立像素宽度阈值时，保持所述图片元素的宽度、高度不变。4.如权利要求1所述的方法，其特征在于，对预先设计好的设计稿上的图片元素进行调整的步骤，还包括：当所述图片元素的宽度与所述主流设备独立像素的宽度不一致、且所述图片元素的宽度不小于所述设备独立像素宽度阈值时，根据预设的百分比，对所述图片元素的宽度、高度进行调整。5.如权利要求1所述的方法，其特征在于，对预先设计好的设计稿上的图片元素进行调整的步骤，还包括：当所述图片元素为所述设计稿的底部操作栏、且调整后的所述设计稿要求恰好布满移动终端的显示屏幕时，通过所述响应...

【专利技术属性】
技术研发人员：胡建，
申请(专利权)人：深圳市共进电子股份有限公司，
类型：发明
国别省市：广东,44