响应图像或不同的图片

Responsive image or different pictures

我想知道使用 bootstrap 创建响应式网站的更好方法是什么。

1- Use img-responsive class for responsive images
2- Use 5 different images for different @media

视情况而定。如果您使用的是大图片，最好使用不同的尺寸，因为较小的尺寸更适合移动设备，尤其是在移动数据连接上。

除了小图片，我会针对不同的分辨率使用不同的图片。但不在 CSS 中使用媒体查询 - 在 HTML.

中有一个 draft of a standard 用于执行此操作

这东西还没有完全实现，但最近有一些进展（尤其是在Chrome）。但是，有一个 JavaScript polyfill 用于此 - 我对此有很好的经验。

示例： 可能如下所示：

<picture>
    <source media="(min-width: 1440px)" srcset="2000px.jpg 1x, 4000px.jpg 2x">
    <source media="(min-width: 500x)" srcset="1440px.jpg 1x">
    <source media="all" srcset="480px.jpg 1x">
    <img src="fallback.jpg" alt="alternative text">
</picture>

标签按顺序处理，使用第一个匹配媒体查询的标签。所以这将：

  1. 在宽度至少为 1440 像素且设备像素比小于 2x
    2. 的视口上渲染图像 2000px.jpg
  2. 在宽度至少为 1440 像素且设备像素比至少为 2x
    3. 的视口上渲染图像 4000px.jpg
  3. 在宽度介于 480 像素和 1439 像素之间的视口上渲染 1440px.jpg（设备像素比无关紧要）
  4. 在所有其他情况下呈现 480px.jpg，除了：
  5. 如果浏览器不支持图片标签，渲染图片fallback.jpg。

使用 标签并不是唯一的方法，还有更多的可能性。请参阅上面链接的标准草案。