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

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);
}

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

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

如您所见，即使图像上传得更大。因此29px实际上在移动设备上呈现为58px（取决于哪个设备）。图像被拉长了。

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

Answer 1

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

此示例假定您已为高DPI显示创建了一个名为[email protected]的新图像。 （@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([email protected]);
    background-size: 29px 29px;
  }
}

设置background-size属性非常重要，以便将图像“缩小”到您希望在CSS pixels中呈现的大小。

如果您想提供针对更高分辨率设备（如iPhone X）优化的图像，则可以添加其他媒体查询：

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
  background: url([email protected]);
  background-size: 29px 29px;
}

Answer 2

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

background: url(add.svg);

这是一个通用的解决方案，可以适用于现在和将来的所有分辨率。