移動端關於@2x與@3x的圖片載入實現方法(基於vue.js+stylus)
阿新 • • 發佈:2019-01-09
1.首先建立mixin.styl檔案程式碼如下:
bg-image($url) // 建立bg-image($url)函式
background-image: url($url + "@2x.png")
@media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
2.編寫html程式碼
<div class="title">
<span class="brand"></span >
<span class="name"></span>
</div>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl" //引用mixin.styl檔案
.brand
display: inline-block
width: 30px
height: 18px
bg-image('brand') // 使用bg-image($url)函式 $url為變數:brand
background-size: 30 px 18px
background-repeat: no-repeat
</style>
註釋
bg-image('brand')中 brand為/header/brang.@2x.png || brang.@3x.png的圖片名
/header/brang.@2x.png || brang.@3x.png為檔案路徑
此處使用stylus語法