解决方案1：最大宽度

Question

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

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

对于每个屏幕尺寸，这些媒体查询中的一个将是真实的。该图像将被提供。

Answer 2

要解决您的加载时间问题，一个选项是使用媒体查询，以便您可以根据访问者视口大小控制背景图像。 e.g。

@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，则可以转到用户＆gt;获取相关详细信息。技术＆gt;浏览器＆amp;操作系统和次级维度＆＃39;搜索＆＃39;屏幕分辨率＆＃39;

希望这有帮助！

如何使用网站背景图像支持大屏幕分辨率？

2 个答案:

解决方案1：最大宽度

解决方案2：掩盖质量

解决方案3：媒体查询