本文主要是介绍使用stylus编写bg-image（）实现网页图标自适应dpr数值来识别2x图或者3x图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
mixin.styl：
bg-image($url)//默认2x图，dpr为3则使用3x图background-image: url($url+"@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)background-image: url($url+"@3x.png")header.vue:
<template><div class="title"><span class="brand"></span><span class="name">{{seller.name}}</span></div>
</template><style lang='stylus'>
@import '../../common/stylus/mixin.styl'//使用前需要导入....titlemargin: 2px 0 8px 0.branddisplay: inline-blockvertical-align: topwidth: 30pxheight: 18pxbg-image('brand')background-size: 30px 18pxbackground-repeat: no-repeat.namemargin-left: 6pxfont-size: 16pxfont-weight: boldline-height: 18px
</style>这篇关于使用stylus编写bg-image（）实现网页图标自适应dpr数值来识别2x图或者3x图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
