移动端2倍图和3倍图的处理方法

最新推荐文章于 2023-04-24 22:00:41 发布

转载最新推荐文章于 2023-04-24 22:00:41 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/edczjw-Edison/p/12522682.html

文章标签：

#css #css3

本文详细介绍了如何使用CSS媒体查询，根据不同设备的像素密度加载不同分辨率的图片，以提升用户体验和优化网页性能。通过设置@2x和@3x的图片资源，确保了在高像素密度屏幕上也能清晰显示。

/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) {
  .img {
    background-image: url(../images/arrow@2x.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
  }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min--moz-device-pixel-ratio: 3) {
  .img {
    background-image: url(../images/arrow@3x.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
  }
}