# vue自适应图标 cube-ui的安装，看一下官网[https://didi.github.io/cube-ui/#/zh-CN](https://didi.github.io/cube-ui/#/zh-CN)根据提示进行安装，最好安装在cli3上。 >[info] 先定义一个class ``` <span class="brand"></span> ``` >[success] 在样式里调用cube-ui的样式函数，注意‘brand’是名字为‘**brand@2x.png**’和‘**brand@3x.png**’的图片，并图片目录在.vue的当前目录下，直接使用bg-img('图片名')即可。 ``` @import "~common/stylus/mixin" .brand width: 30px height: 18px bg-image('brand') background-size: 30px 18px background-repeat: no-repeat ``` >[success] 引入的mixin.styl内容，其实是引入了cube-ui的目录内容，整体是双层引用，规范化代码 ``` @import "~cube-ui/src/common/stylus/mixin.styl" ``` >[danger] 为什么要这样设置，下面做详细的解释 比如你需要一个30pt\*30pt的图标，那么这时你就需要跟美工要三个文件： * 一个是30px\*30px的PNG图片，用原名来命名即可，例如sample.png。 * 一个是60px\*60px的PNG图片，这个要用原名@2x来命名，例如sample@2x.png。 * 一个是90px\*90px的PNG图片，这个要用原名@3x来命名，例如sample@3x.png。 这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS统一识别为sample.png，用的时候只需要\[UIImage imageNamed:@"sample"\]就行了。 ***** **那么讲一下应用场景：** * 1x的图标用于1:1的屏幕，非视网膜屏，例如iPhone 3GS、（/*20140414DEL*/ //*早期iPhone 4*、感谢 [@池谷湧](https://link.jianshu.com?t=http://blog.csdn.net/u014544346/article/details/51449050) 指正）非视网膜屏的众多iPad等。 * 2x的图标用于1:2的屏幕，大部分视网膜屏，机型如（/*20140414ADD*/ iPhone 4、）iPhone 4S、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。 * 3x的图标目前应用于1:3的屏幕，即iPhone 6Plus，这个就比较特殊了，因为苹果为了方便开发者，想出来一个简便的实现方案，将2208*1242分辨率的图像压缩输出在1920*1080的屏幕上。 要明确的是通常是在一些图标上使用这种方法，而不是遇到img的时候都这样来做