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

qq_42750608

于 2023-11-03 17:44:14 发布

阅读量562

点赞数

分类专栏： JavaScript面试问题 css rem移动端适配文章标签： scss 前端 css

本文链接：https://blog.csdn.net/qq_42750608/article/details/134208044

版权

JavaScript面试问题同时被 3 个专栏收录

73 篇文章

订阅专栏

css

14 篇文章

订阅专栏

rem移动端适配

6 篇文章

订阅专栏

本文介绍了在移动端开发中如何通过SCSS的mixin和媒体查询处理因设备像素比（dpr）不同而需要调整大小的2x和3x图片背景。开发者需在CSS中使用@includebg-image方法引用图片，并根据dpr选择正确的图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端开发过程中，因为手机的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;
  }