我有一个我开发的网站，但我刚刚从一个在2560 x 1600显示器上看它的人那里获得了一个截图，看起来有些荒谬。什么是支持屏幕分辨率的合理上限？我担心通过添加巨大图像会对加载时间产生负面影响。我如何正确处理这个问题？你如何支持网站背景图片的大屏幕分辨率？

2016-12-01 CanadaIT

我会创建不同大小的多个版本的背景图像，并使用媒体查询将它们应用为视口宽度增加。此网站显示桌面屏幕尺寸统计信息，以帮助您选择最大宽度http://gs.statcounter.com/#desktop-resolution-ww-monthly-201510-201610-bar –

您也可以尝试将图像缩放2倍并设置JPG压缩到0％以节省几个字节https://www.filamentgroup.com/lab/compressive-images.html –

解决方案1：最大宽度

使用div容器与下面的CSS：

#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。该图像将被送达。

来源

2016-12-01 19:11:49 JoostS

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

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

什么是合理的上限为屏幕分辨率支持？

这取决于您的访问者。如果你使用谷歌分析，你可以通过转到用户>技术>浏览器& OS并在'次级尺寸'搜索'屏幕分辨率'

希望这会有所帮助！

来源

2016-12-01 19:44:21

你如何支持网站背景图片的大屏幕分辨率？

回答

解决方案1：最大宽度

解决方案2：面膜质量

解决方案3：媒体查询

相关问题