不同屏幕上图片高清显示解决方案

一、背景图片

1、使用 media query判断dpr（devicePixelRatio）-webkit-min-device-pixel-ratio

例子：

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
        .css{
            background-image: url(img_1x.png);
        }
 
        /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .css{
                background-image: url(img_2x.png);
            }
        }
 
        /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .css{
                background-image: url(img_3x.png);
            }
        }

这里有相关工具 retina.js

2、使用image-set

使用的伪代码如下

.css {
            background-image: url(1x.png);    /*不支持image-set的情况下显示*/
            background: -webkit-image-set(
                    url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                    url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
                    url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
            );
        }

其相比如media query的实现，image-set仅支持单个图片的高清化，不适合在css sprite下使用。 并且兼容性也是一大硬伤。

image-set兼容性.png

二、普通图片

1、srcset

MND描述

srcset有两种用法，一个是像素密度描述符，一个是宽度描述符（使用宽度描述符会涉及到sizes属性），两种不能混用。

• 像素密度描述符
  像素密度描述符很好理解：
  示例：

    
    



    ![](bug修改.png)

Paste_Image.png

当我选择不同dpr时他就会显示预先指定的不同图片；例如1dpr它就会显示400000000kernel.jpg （因为我们在srcset中指定了400000000kernel.jpg 后的参数为1x），以此类推。。。

• 宽度描述符

示例：

    
    



    ![](bug修改.png)

上面代码运行后，当我将浏览器窗口宽度大小调到400px及以下，浏览器显示400000000kernel.jpg的图片，调到401px-600px 显示600000000kernel.jpg ，调到601px以上显示12800000000kernel.jpg；

上面sizes="(max-width:400px) 100vw,100vw" 表示当屏幕宽度小于及等于350px时，图片宽度等于可视宽度的一般，大于350px则图片宽度等于可视宽度；

srcset的兼容性如下：

srcset兼容性

三、icon类图片

可采用svg或者iconfont等；

四、补充：

Paste_Image.png

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *