2

我对 bootstrap 有点陌生，但在站点开发和 css 方面非常精通……我很难理解 Bootstrap 如何处理针对不同视口大小的优化图像。

根据我的经验，您需要针对正在查看的设备优化图像，而我在 Bootstrap 中看到的所有内容都让我相信它不会这样做。似乎它只是使用一个大图像并使用 css 将其缩小（甚至放大）。当我们希望移动设备拥有丰富的体验并针对较小文件的速度进行优化时，这似乎与直觉相悖。

例如，如果我希望图像在桌面上很好地显示，并且布局为 900 像素（~200k）宽，我会针对该尺寸优化图像。对于具有布局宽度的移动设备，我可以说是 400 像素（~50k）的优化版本。

在我自己的系统中，我们通过用户代理预先发现并在编译期间填充正确的图像，我意识到我也可以简单地将所有这些放入引导程序中，但我希望有某种形式的机制来实现类似的功能，是我期待太多了吗？

我看不到 Bootstrap 如何能够延迟加载页面内容中的图像，直到发现视口大小，以便使用针对该大小优化的正确文件？我在这里错过了什么吗？

- - 编辑

我很确定您可以根据视口大小在 Bootstraps CSS 中定义图像路径，但它没有回答它将首先加载的问题？

---- 2014 年 11 月编辑

仅供参考，这个问题已经过时了...... @media 查询将完成不同的文件请求，但是您仍然需要每种大小的单个文件或某种动态生成它们的方式。无论哪种方式，对于任何不匹配的内容都会延迟加载，因此它进行了一些优化。对于移动用户，在请求时识别用户代理并进一步优化仍然是有益的，因为加载除移动特定文件/类之外的任何内容都是无用的，只会减慢速度。

4

1 回答 1

5

您是正确的，默认情况下 Bootstrap 仅使用 CSS 来缩放图像，因此从文件大小的角度来看它并不理想。

自适应图像是一个不错的选择，它将根据屏幕尺寸提供不同尺寸的图像。追溯添加很容易，因此很容易检查它是否适合您。

使用背景图像是另一种可能性。使用媒体查询，您可以在不同的视口指定不同的背景图像，但如果您有很多图像，这会有点混乱。

如果你想变得花哨，http: //responsejs.com 在技术上应该可以很好地工作。

当然还有其他选择。

祝你好运！

编辑

如果可以选择使用另一个框架，Zurb Foundation有一个新的交换组件，它允许您在不同的视口指定不同的图像。它非常光滑。例如

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
<!-- or your own queries -->
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))],  [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">
于 2013-11-25T20:22:55.177 回答