如何优化Vue中自定义全局消息框组件的显示效果和用户体验？

本文共计1043个文字，预计阅读时间需要5分钟。

1. 发现问题+适配移动端：为在不同型号设备上更好地展现结构排版，决定采用rem布局。使用rem布局时，HTML的字体大小font-size有一个标准。我这边用的是750px的基准。

1.发现问题

在进行移动端适配的时候，为了在各个型号的设备上能够更好的提现结构排版，决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿，就采用1rem = 100px。

在使用的过程中会用到一些第三方UI组件，而第三方UI组件是以px单位为标准的。

使用时发现：本来应该细长的提示语句变得很大！

最后发现可能是因为这个icon是继承了html设定的font-size，尝试加一些样式上去还是无效。（如果rem布局上有直接更改第三方组件样式成功的小伙伴欢迎告诉我哟！）

2.解决问题

有一种方法是可以可以用 px2rem-loader 插件可以将第三方ui库的px转换成rem单位，我们在写样式的时候用px，这个插件会帮我们转换为rem单位。