背景图像在移动设备上看起来很可怕

Question

图片几乎解释了这个问题。

在手机上，我干净/清脆的重复背景（位置中心底部，重复x）看起来像垃圾。它在手机上实际上看起来并不大 - 它在视觉上看起来与计算机上的大小相同，但是 - 我认为，因为手机的分辨率更高，所以它看起来像是像素化和波涛汹涌。

我无法相信我之前从未遇到过这个问题，但搜索主题只是出现“如何在移动设备上制作重复背景”或“如何在移动设备上制作全屏背景”......等

如何在移动设备和计算机上制作看起来干净/清晰/良好的背景图像？

我尝试将图像设为200dpi而不是72dpi，但是 - 没有运气。

Answer 1

虽然最佳解决方案是SVG，但最简单的方法是使用像素密度媒体查询。

e.g.
.container {
  background-image: url('images/bg.jpg');
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  .container {
    background-image: url('images/bg-2x.jpg');
  }
}

如果您正在使用预处理器，则可以更轻松，因为您可以为不同的断点创建mixins，包括像素密度。