css二倍图的使用

2024-07-01 16:39| 来源: 网络整理| 查看: 265

使用 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") } }

css样式中调用 bg-image 方法

div{ width:30px; height:20px; background-size:30px 20px; background-repeat:no-repeat; @include bg-image('special_1'); }

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

如何在普清的屏上调试CSS样式二倍图背景

【本文地址】

css二倍图的使用

css二倍图的使用

今日新闻

推荐新闻