响应式图像或不同的图片[关闭]

Question

我想知道哪种方法更适合使用引导程序创建响应式网站。

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

Answer 1

这取决于。如果您使用的是大图片，最好使用不同的尺寸，因为较小的尺寸更适合移动设备，尤其是在移动数据连接时。

Answer 2

除了小图像，我会为不同的分辨率使用不同的图像。但不要在 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 像素且设备像素比小于 2 倍的视口上渲染图像 2000px.jpg
2. 在宽度至少为 1440 像素且设备像素比至少为 2 倍的视口上渲染图像 4000px.jpg
3. 在宽度介于 480 像素和 1439 像素之间的视口上渲染 1440px.jpg（设备像素比无关紧要）
4. 在所有其他情况下渲染480px.jpg，除了：
5. 如果浏览器不支持图片标签，则渲染图片fallback.jpg。

使用 -tag 并不是做这种事情的唯一方法，还有更多的可能性。请参阅上面链接的标准草案。