scss解决2x,3x背景图片问题

本文主要是介绍scss解决2x,3x背景图片问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:

一. 2x,3x图片原理:

1. 通过mixin语法, 动态修改background-image。

2. 通过@media (媒体查询)，判断设备的dpr。

3. scss代码:

@mixin 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");}
}

二. 在需要添加这种背景图片的选择器中使用

@include bg-image(图片url中截取@2x.png或者@3.png之前的路径)

比如@include bg-image('../../img/1-'); 是因为期望的图片有../../img/1-@2x.png, ../../img/1-@3x.png;

& .header {position: relative;height: 200px;width: 100%;background-color: #ff5555;z-index: 9;@include bg-image('../../img/1-');background-repeat: no-repeat;background-size: cover;}

这篇关于scss解决2x,3x背景图片问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---