移动端项目中 @2x 图 和 @3x 图 的解决方案

1. 很多人会问?为什么移动端需要@2x或者@3x的图片 ?

具体请参考:为什么移动端需要@2x或者@3x的图片
本篇主要是解决@2x 图 和 @3x 图 的实现方案,下面是具体板栗。

说在前面的话:
移动端开发过程中,你会发现公司项目图片文件夹中会有很多@2x或者@3x的图标,是因为手机的dpr(设备像素比不同),我们> 需要根据dpr来修改不同大小的图标,来解决不同设备用户视觉体验。
注:下面是scss语法。

2.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。

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

3.css样式中调用 bg-image 方法

div{
  width:30px;
  height:30px;
  background-size:30px  30px;
  background-repeat:no-repeat;
  @include bg-image('logo');      
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页