本发明属于计算机技术领域，尤其涉及一种移动端界面的适配方法、装置、移动终端及存储介质。
背景技术
移动终端的界面适配是指设计一种适配方案，在主流移动终端上都能达到比较好的效果，使用户看起来比较舒适，同时也不违背终端大屏幕的初衷，即在更大的终端上用户可以在不翻页的情况下看到更多的内容。目前移动终端的飞速发展，追求的是在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示出了本发明实施例二提供的移动端界面的适配装置的结构，为了便于说明，仅示出了与本发明实施例相关的部分，其中包括：
图片调整单元21，用于根据预设的主流设备独立像素、预设的响应式布局方式，对预先设计好的设计稿上的图片元素进行调整。
在本发明实施例中，ui设计人员可先根据目前主流移动终端的分辨率，设计相应的固定尺寸的设计稿，设计稿上标注了图片元素、文字元素的相关信息，例如图片元素的宽度、高度和位置等，又如文字元素的字体、位置等。ui设计人员完成设计稿后，将设计稿交给前端工程师，因此，此时的用户为前端工程师，用户可通过对设计稿上的图片元素、文字元素进行调整，得到设计稿对应的移动端页面。
在本发明实施例中，可根据目前主流的移动终端的设备独立像素，预先设置主流设备独立像素。根据主流设备独立像素对设计稿上的图片元素进行调整时，可判断图片元素的宽度与主流设备独立像素的宽度是否一致，当一致时，根据主流设备独立像素的宽度与设计稿的宽度之间的比值，对图片元素的宽度、高度进行调整，以便得到较好的界面适配效果。
字体调整单元22，用于根据预设的字体格式，对设计稿上的文字元素进行调整。
在本发明实施例中，可通过rem设置设计稿上的文字元素在移动端界面的大小，rem是css3中的一个度量单位，通过rem来对设计稿上的文字元素进行调整，以有效地提高文字元素的调整效果和效率。
移动界面生成单元23，用于根据调整后的图片元素和调整后的文字元素，生成设计稿对应的移动端界面并输出。
在本发明实施例中，可将调整后的图片元素、文字元素，对应地输出在移动终端的显示屏幕上，得到设计稿对应的移动端界面。
优选地，如图3所示，图片调整单元21包括：
第一宽度判断单元311，用于判断图片元素的宽度与主流设备独立像素的宽度是否一致。
第一尺寸调整单元312，用于当图片元素的宽度与主流设备独立像素的宽度一致时，根据主流设备独立像素的宽度与设计稿的宽度之间的比值，对图片元素的宽度、高度进行调整。
在本发明实施例中，当图片元素的宽度与主流设备独立像素宽度不一致、图片元素的宽度小于预设的设备独立像素宽度阈值时，保持图片元素的宽度和不变，即移动端界面上图片元素的宽度和高度分别与设计稿上该图片元素的宽度和高度相同，从而使得尺寸较小的图片元素不因为移动终端的变化而发生尺寸变化，有效地提高了移动端界面的适配效果。
进一步优选地，图片调整单元21还包括：
第二宽度判断单元313，用于当图片元素的宽度与主流设备独立像素宽度不一致时，判断图片元素的宽度是否小于预设的设备独立像素宽度阈值。
第二尺寸调整单元314，用于当图片元素的宽度小于设备独立像素宽度阈值时，保持图片元素的宽度、高度不变。
在本发明实施例中，当图片元素的宽度与主流设备独立像素宽度不一致、且图片元素的宽度不小于设备独立像素宽度阈值时，根据预设的百分比，对图片圆度的宽度、高度进行调整，从而使得尺寸较大的图片元素按照固定的百分比进行尺寸变化，有效地提高了移动端界面的适配效果。此外，对于设计稿上标注了尺寸不固定的图片元素，也可通过固定的百分比进行尺寸调整。其中，预设的百分比可根据设计稿的尺寸与移动端界面的尺寸确定，在此不进行限制。
优选地，在根据主流设备独立像素对设计稿上的图片元素进行调整时，当图片元素为设计稿的底部操作栏、且调整后的设计稿要求恰好不满移动终端的显示屏幕时，通过响应式布局方式来为该图片元素设计并调用对应的宽度、高度，从而使得该图片元素在随移动终端显示屏幕的尺寸变化发生变化时保持较小的变化，有效地提高了移动端界面的适配效果。
在本发明实施例中，在根据预设的主流设备独立像素、响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素、文字元素，生成设计稿对应的移动端界面并输出，从而通过多种调整方式的结合有效地提高了移动端界面的适配灵活性，进而提高了移动端界面的适配效果，提高了用户体验。
在本发明实施例中，移动端界面的适配装置的各单元可由相应的硬件或软件单元实现，各单元可以为独立的软、硬件单元，也可以集成为一个软、硬件单元，在此不用以限制本发明。
实施例三：
图4示出了本发明实施例三提供的移动终端的结构，为了便于说明，仅示出了与本发明实施例相关的部分。
本发明实施例的移动终端4包括处理器40、存储器41以及存储在存储器41中并可在处理器40上运行的计算机程序42。该处理器40执行计算机程序42时实现上述方法实施例中的步骤，例如图1所示的步骤s101至s103。或者，处理器40执行计算机程序42时实现上述装置实施例中各单元的功能，例如图2所示单元21至23的功能。
在本发明实施例中，在根据预设的主流设备独立像素、响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素、文字元素，生成设计稿对应的移动端界面并输出，从而通过多种调整方式的结合有效地提高了移动端界面的适配灵活性，进而提高了移动端界面的适配效果，提高了用户体验。
实施例四：
在本发明实施例中，提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法实施例中的步骤，例如，图1所示的步骤s101至s103。或者，该计算机程序被处理器执行时实现上述装置实施例中各单元的功能，例如图2所示单元21至23的功能。
在本发明实施例中，在根据预设的主流设备独立像素、响应式布局方式，对设计稿上的图片元素进行调整，根据预设的字体格式，对设计稿上的文字元素进行调整，根据调整后的图片元素、文字元素，生成设计稿对应的移动端界面并输出，从而通过多种调整方式的结合有效地提高了移动端界面的适配灵活性，进而提高了移动端界面的适配效果，提高了用户体验。
本发明实施例的计算机可读存储介质可以包括能够携带计算机程序代码的任何实体或装置、记录介质，例如，rom/ram、磁盘、光盘、闪存等存储器。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。