共计 376 个字符,预计需要花费 1 分钟才能阅读完成。
移动端开发过程中,因为手机的 dpr(设备像素比不同),我们需要根据 dpr 来修改图标的大小:
如果设备像素大于等于 2,则用 2 倍图
在 stylus 中定义一个方法:
bg-image($url)
/\* 如果设备像素大于等于 2,则用 2 倍图 \*/
background-image: url($url + "@2x.png")
background-repeat no-repeat
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
/\* 如果设备像素大于等于 3,则用 2 倍图 \*/
background-image: url($url + "@3x.png")
background-repeat no-repeat
-webkit-min-device-pixel-ratio: 3 是指当时显示屏最小的色倍为 3 倍的
正文完