您好!欢迎访问leyu乐鱼全站app!
专注精密制造10载以上
专业点胶阀喷嘴,撞针,精密机械零件加工厂家
联系方式
053-439976494
您当前的位置: 主页 > 新闻动态 > 公司新闻 >

公司新闻

ui设计师必看!用代码让浏览器自动切换 1X/2X/3X 图像

更新时间  2021-11-11 02:03 阅读
本文摘要:现在许多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图越发真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动切换为 2X 或 3X 图像。这里先容2个简朴的方法来实现这个效果,划分是使用 CSS 的媒体查询或 srcset 属性来处置惩罚这个问题。

乐鱼官网推荐

leyu乐鱼全站app

现在许多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图越发真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动切换为 2X 或 3X 图像。这里先容2个简朴的方法来实现这个效果,划分是使用 CSS 的媒体查询或 srcset 属性来处置惩罚这个问题。

开始之前,我们要准备3张图:images100.jpg (为1X巨细图像,100px * 100px)images200.jpg (为2X巨细图像, 200px * 200px)images300.jpg (为3X巨细图像, 300px * 300px)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 的浏览器才气兼容,过低版本将无法看到效果。


本文关键词:设计师,必看,用,代码,让,浏览器,leyu乐鱼全站app,自动,切换

本文来源:leyu乐鱼全站app-www.pj0047.com