【问题标题】：How do you support large screen resolutions with website background images?您如何使用网站背景图像支持大屏幕分辨率？
【发布时间】：2017-04-16 13:23:43
【问题描述】：

我有一个自己开发的网站，但我刚刚得到了一个人在 2560 x 1600 显示器上查看它的屏幕截图，这看起来有点荒谬。屏幕分辨率支持的合理上限是多少？我担心通过添加巨大的图像对加载时间产生负面影响。我该如何正确处理？

【问题讨论】：

我会创建不同大小的背景图像的多个版本，并使用媒体查询在视口宽度增加时应用它们。该站点显示桌面屏幕尺寸统计信息，以帮助您选择最大宽度gs.statcounter.com/…
您也可以尝试将图像放大 2 倍并将 JPG 压缩设置为 0% 以节省几个字节 filamentgroup.com/lab/compressive-images.html

标签： css web responsive-design

【解决方案1】：

解决方案 1：最大宽度

使用具有以下 CSS 的容器 div：

#innerbody {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

将所有 HTML 放入此容器中（将容器包裹在所有 HTML 周围），如下所示：

<body>
  <div id="innerbody">
  ... your page ...
  </div>
</body>

我还会在正文中添加一个漂亮的微妙背景颜色，以标记“页面”的结束位置，如下所示：

body {background: #eee;}
#innerbody {background: #fff;}

解决方案 2：屏蔽质量

如果您只担心（较差的）图像质量，您可以添加容器 div（来自解决方案 1）并使用此 CSS 覆盖阴影（对角线）。这个技巧通常用于低质量的全屏视频，但也适用于背景图像。

#innerbody {
  width: 100%;
  background: url(/hatch.png);
}

解决方案 3：媒体查询

有大屏幕吗？你会得到一个大图像。有小屏幕吗？你会得到一个小图像。听起来合乎逻辑，对吧？您可以通过使用媒体查询来实现这一点。像这样工作：

@media screen and (max-width: 500px) {
  body {
    background: url(small_image.jpg);
  }
}
@media screen and (max-width: 1000px) and (min-width: 501px) {
  body {
    background: url(medium_image.jpg);
  }
}
@media screen and (max-width: 2000px) and (min-width: 1001px) {
  body {
    background: url(big_image.jpg);
  }
}
@media screen and (min-width: 2001px) {
  body {
    background: url(really_big_image.jpg);
  }
}

对于每种屏幕尺寸，这些媒体查询中的一个将为 true。将提供该图像。

【讨论】：

【解决方案2】：

为了解决您的加载时间问题，一种选择是使用媒体查询，以便您可以根据访问者视口大小控制背景图像。例如

@media (max-width: 800px) {
  .div-with-background{
        background-image: url("background-sm.jpg");
  }
}

@media (max-width: 1200px) {
   .div-with-background{
        background-image: url("background-md.jpg");
  }
}

@media (min-width: 1201px){
   .div-with-background{
        background-image: url("background-lg.jpg");
  }
}

屏幕分辨率支持的合理上限是多少？

这取决于您的访问者。如果您使用 Google Analytics，您可以通过转到用户 > 技术 > 浏览器和操作系统并在“次要维度”下搜索“屏幕分辨率”来获取详细信息

希望这会有所帮助！

【讨论】：