不同屏幕上图片高清显示解决方案
2017-03-11 本文已影响434人
该帐号已被查封_才怪
一、背景图片
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属性），两种不能混用。
- 像素密度描述符
像素密度描述符很好理解：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Paste_Image.png
当我选择不同dpr时他就会显示预先指定的不同图片；例如1dpr它就会显示400000000kernel.jpg （因为我们在srcset中指定了400000000kernel.jpg 后的参数为1x），以此类推。。。
- 宽度描述符
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
上面代码运行后，当我将浏览器窗口宽度大小调到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
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
