css二倍图的使用
使用 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;
}
}
css 1倍图 2倍图 3倍图
最新推荐文章于 2024-05-30 22:27:30 发布