# 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的時候都這樣來做