不同设备上的视区和像素密度使图标变得模糊

使用 -webkit-min-device-pixel-ratio 和 min-resolution 媒体查询以提供要在更高dpi显示器上使用的58×58像素图像。

本例假设您已经为高dpi显示创建了一个名为 add@2x.jpg . (The @2x 后缀是本机ios应用程序开发中常用的一种约定,但您可以根据需要为文件命名。)

button{
  width: 29px;
  height: 29px;
  border: 1px solid white;
  background: url(add.jpg);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    background: url(add@2x.jpg);
    background-size: 29px 29px;
  }
}

设置 background-size 属性,以便将图像“缩小”为您希望在其中呈现的大小。 CSS pixels .

如果要提供为更高分辨率设备(如iPhone X)优化的图像,可以添加其他媒体查询:

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
  background: url(add@3x.jpg);
  background-size: 29px 29px;
}

最好的解决方案是使用和svg。使用Illustrator创建图标,并将其用作网站中的常规图像。

background: url(add.svg);

这是一个普遍的解决办法,将在现在和将来与所有决议一起工作。