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

Question

我正在使用视口和媒体查询来使我的网站移动友好。

<meta name='viewport'content='width=device-width,initial-scale=1.0'>

我有一个背景这样的按钮：

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

在计算机上看起来非常简单：

在高像素密度的设备上，需要视口标签才能正确显示网站。但是图像被拉伸以在新的视口尺寸中显示。

如您所见，即使图像被上传得更大。因此，在移动设备上（取决于哪个设备）实际上会像58px一样渲染29px。并且图像被拉伸。

有什么解决方案吗？我发现的唯一一个就是不使用图像。有什么想法吗？

Answer 1

使用-webkit-min-device-pixel-ratio和min-resolution媒体查询来提供58×58像素的图像，以用于更高DPI的显示器。

此示例假定您为高DPI显示创建了名为add@2x.jpg的新图像。 （后缀@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;
}

Answer 2

对此的最佳解决方案是使用SVG。使用Illustrator创建一个图标，并将其用作网站上的常规图像。

M2_HOME=C:\Program Files\apache-maven-3.6.0
M2=%M2_HOME%\bin
PATH=%M2%;%PATH%

这是一个通用解决方案，将在现在和将来使用所有分辨率。