β

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

设计达人 247 阅读

css device pixel ratio

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动切换为 2X 或 3X 图像。 这里介绍2个简单的方法来实现这个效果,分别是使用 CSS 的媒体查询或 srcset 属性来处理这个问题。 开始之前,我们要准备3张图: images100.jpg (为1X大小图像,100px * 100px) images200.jpg (为2X大小图像, 200px * 200px) images300.jpg (为3X大小图像, 300px * 300px) css device pixel ratio CSS教程:自动切换 1X/2X/3X 图像 在线演示: http://www.shejidaren.com/examples/css-device-pixel-ratio/ 下面来看教程吧。

方法一:使用 CSS 的 devicePixelRatio 媒查询属性

CSS 样式代码

/*默认大小*/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于2,则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
  .photo {
    background-image: url(image200.png);
    background-size: 100px 100px;
  }
}
/* 如果设备像素大于等于3,则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
  .photo {
    background-image: url(image300.png);
    background-size: 100px 100px;
  }
}
.photo {width:100px;height:100px;}
html 代码
<div class="photo"></div>

方法二:直接使用 IMG 的 SRCSET 属性

<img width="100" height="100" src="http://www.shejidaren.com/image100.png" srcset="image200.png 2x,image300.png 3x"/>
上面代码中,浏览器会通过 srcset 属性来自动选择2X,3X图,比如用 iPhone 6s Plus,就会自动选择3x 的图像。 想了解更多设备的devicePixelRatio,可查看到这个网址查看: https://bjango.com/articles/min-device-pixel-ratio/ 以上代码都需要支持 CSS3 的浏览器才能兼容,过低版本将无法看到效果。


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
作者:设计达人
爱设计,爱分享。
原文地址:CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像, 感谢原作者分享。