项目做完了之后,遇到一个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标签的效果和背景图片一样,原因是没有设置大小。
最终的效果