css使用svg,单位使用vw,vh出现的问题

       项目做完了之后，遇到一个css上面的问题，因为项目做的是一个手机端的页面，采用的单位是vm,vh,项目上线后没有什么问题，但经过同事的测试，居然出现了样式上面的问题，特此记录一下遇到的问题。

     在手机屏幕为375，667的情况下，这是没有任何问题的，但是在ipad下(手机宽度比较宽)，就会出现这样的问题，

一开始，是因为这个图标用的是背景图片，没有设置no-repeat属性，后来设置了no-repeat属性，又出现了另一个问题，

  出现这种问题的原因：因为使用的是vw，vh，100vw就是代表整个页面的宽度，当页面的宽度变大的时候，1vw对应的像素实际上也变大了，(比如一开始页面的宽度是100px,即1vw对应1px,后来页面的宽度是200px，1vw对应的就是2px了,变大了)，但是背景图片的大小并没有采用vw,vh为单位，依然是px，所以在页面的宽度较大的时候，采用背景图片看起来比页面的宽度小的时候，缩小了，一个方法是给背景图片设置background-size属性，也给一个vw,vh的相对大小，这样背景图片的大小就会随着页面宽度的变化而变化了，但是不建议采用背景图片作为图标的方法。

   不建议采用背景图片作为图标是因为感官不对，这个字体图标是需要点击的，一般背景图片的功能就是当作背景图，需要点击功能的最好用前景图(比如使用img标签)，一开始使用img标签的效果和背景图片一样，原因是没有设置大小。

     

最终的效果