uniapp字体和图标不水平

最近在开发一个uniapp应用时，遇到了一个奇怪的问题，就是字体和图标在某些设备上显示不水平。这个问题当时让我感到十分困扰，因为在我的设备上显示正常，却在其他设备上出现了问题。经过我几天的研究和调试，终于找到了原因和解决方法。

问题描述

首先，让我们来看一下这个问题的表现。在我的开发设备上，如下图所示，字体和图标的显示都非常正常，没有任何问题。

但是，当我把应用安装到其他安卓设备上时，却出现了问题。如下图所示，可以看到字体和图标都不是水平的，字体的底部偏向左侧，图标的底部偏向右侧。

这个问题的出现导致应用的整体美感受到了影响，而且对于一些需要精细布局的UI设计来说，也会造成很大的困扰。

问题分析

接下来，我们来分析一下这个问题的原因。经过我的调试和研究，我发现这个问题主要是由于设备的分辨率和像素密度引起的。

在我自己的设备上，分辨率为1080x1920，像素密度为440dpi。而在其他测试设备上，分辨率和像素密度会有所不同。因为字体和图标是根据像素点来显示的，所以不同分辨率和像素密度的设备上，相同的字体大小和图标大小会显示出不同的大小。而且，字体和图标的锚点不同，也会导致其底部对齐位置有所偏差。

解决方法

接下来，我们来探讨一下如何解决这个问题。经过我的研究和探索，我总结出了以下的解决思路。

1.使用矢量图标

矢量图标（Vector icons）是一种基于数字描述图形的图标，其不同于位图图标（Bitmap icons），可以在任意分辨率和像素密度下保持清晰度和一致性。使用矢量图标可以避免因分辨率和像素密度不同而导致的图标大小和位置偏离问题。

Uniapp中使用矢量图标需要借助第三方库（如fontawesome、ionicons等），通过引入库中的图标文件，在页面中使用其对应的类名就可以显示出对应的图标。具体的用法可以参考相关第三方库的文档。

2.使用flex布局

flex布局是CSS3新增的一种布局方式，其可以让容器中的标签灵活地调整大小、间距和位置，解决因分辨率和像素密度不同而导致的排版问题。Uniapp中也支持使用flex布局，可以将父容器的布局方式设置为flex，子标签的大小和位置则可以通过设置它们的flex属性来实现。

3.使用像素单位

在Uniapp中，标签的默认单位为rpx（responsive pixel），其是一种根据设备像素密度自适应的单位，但是在某些情况下，使用像素单位（px）会更加准确和可靠。因为像素单位不会受设备像素密度的影响，可以避免在不同分辨率和像素密度设备上出现排版问题。

结语