真正碰到代码的第二天——移动端登录页图标自适应

遇到的第二个问题

在昨天搭建登录页的基础上，出现了个bug
当我任意拉动屏幕尺寸时，输入用户名和密码前的图标会变得很大只很丑，不会随着屏幕自适应，百度了好多好多，简单来讲就是可以用vant组件内的图标，但是它的图标库样式很少所以只能通过导入外部图标，我选择的是导入阿里巴巴图标库里的图标，因为它占用的内存小正好适合移动端界面。接下来就是解决方法：

1. 打开阿里巴巴图标库官网

点击箭头位置进行中文搜索，例如：用户

2.选择一个想要的图标点击下图中第一个，购物车图标

点击购物车

在右上角加号创建自己的项目（如下图）

3. 创建项目

红色框框内是重点，最好英文，在代码中引入图标时会用到，尽量用图中的这两个词。

4. 新建完成后，把你下载的图标加入到你的新项目中

点击下载至本地，在assets新建一个文件夹，把下载到的图标文件放进去

把下载到的css引入main.js里，注意你的代码文件名称层级要统一，
代码如下import '@/assets/iconfont/iconfont.css'

5. 然后再vue页面添加i标签

有两种写法第一种是我在红色框里写的样式&XXX；是从下图复制得到的


还有一种是利用创建项目时用的前缀写的图标

6. 接下来就是修改css样式的时候啦

我就不写啦，相信css样式你们写的会比我好。

综上所示

用以上方法就可以解决输入框前的图标自适应问题

我还有不懂的地方，是在密码输入框后面的密码显示/密码隐藏怎么让它自适应呢，我移动到370左右会自动从输入框处窜到下面一点。如下图

• 如果哪位大神有耐心的话能详细的告诉我该怎么做我会非常感激的！
• 谢谢有耐心看完我这篇小白技术博客的人！虽然百度也有但是我一开始真的没搞出来后来才真正完成这个小bug，毕竟技术有限，不喜勿喷讷！