移动端关于@2x与@3x的图片加载实现方法(基于vue.js+stylus)
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-ima
·
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文件
.branddisplay: inline-block width: 30px height: 18px bg-image('brand') // 使用bg-image($url)函数 $url为变量:brand background-size: 30px 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语法
更多推荐
已为社区贡献1条内容
所有评论(0)