html - 网站不同屏幕宽度的最佳标准图像尺寸

Question

我正在使用 picturefill.js 库在不同宽度的屏幕上提取不同尺寸的相同图像。

难题在于，考虑到所有移动设备、平板电脑和桌面设备，我应该创建多少张图片？通过这样做，我想节省带宽。

现在，我正在创建具有不同尺寸的相同图像。图片大小以像素为单位

240   
320 
640   
480 
600 
768 
960
992
1200
1368
1600
2400
2500
3200
4000

如果我创建所有尺寸的图像并使用 picturefill JS 加载它，它会对性能有任何影响吗？

Answer 1

从技术上讲，您可以继续所有 15 个分辨率，并在媒体查询中设置 15 个断点。应该不会对性能产生任何负面影响。然而，不利的一面是:您可能会疯狂地维护所有这些媒体查询。想象一下您的声明需要多长时间才能包含 15 个不同的文件，具体取决于分辨率。

明智、实际的做法是针对几个分辨率，并为每个分辨率使用最佳图像。您需要与您的用户体验工程师(可能是您自己)合作来识别这些断点。例如，您的目标是:

1. 手机A(宽320px)
2. 手机B(宽度480px)
3. 手机C(宽度600px)
4. 平板电脑 D(宽度 1024 像素)
5. 平板电脑/台式电脑 E(宽度 1440 像素)

您可以在上述断点处设置您的媒体查询。并在您的整个站点中始终如一地使用它们。因此，您只能使用具有这些宽度的图像，假设它们都是全宽图像。如果您希望它们即使在高 DPI(视网膜)上也看起来清晰，请记住将每个尺寸加倍。您很可能最终会得到 5 或 6 张不同的图片。

因此，虽然可能有 15 个断点，但为了您自己的理智，最好确定几个关键断点。