AMO全媒体运营
首页 前端设计 CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

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

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别…

现在很多客户都买高分屏的电脑,如果直接发 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="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 的浏览器才能兼容,过低版本将无法看到效果。

以上内容就是“CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容,可以来AdobeEdu设计联盟官方网站获取。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

2022年 CodePen 最热门的前端代码 Top 100

2022年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带...
优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,...
架构图有哪些?很多程序员都不会画

架构图有哪些?很多程序员都不会画

很多程序员画架构图头疼,不知道画什么、怎么画! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要画图。 一...
CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

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

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案...
表单密码强度可视化设计

表单密码强度可视化设计

在填写表单密码时,有的会会显示「弱、中、强」的文案来表示你填写的密码强度,这是一种不错的用户体验方式,然而今天我们分享一...

发表回复

返回顶部