使用 CSS 的 DevicePixelRatio 媒查询属性
参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像
移动端项目中 @2x 图 和 @3x 图 的使用(需要支持css3)
/*默认大小*/ .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;}
scss写法
@mixin bg-image($url) { background-image: url($url + "@2x.png"); @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image: url($url + "@3x.png") } }
div{ width:30px; height:20px; background-size:30px 20px; background-repeat:no-repeat; @include bg-image('special_1'); }
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。