srcset 和媒体查询的区别？

Question

srcset 和 media query 有什么区别？哪个更好，何时使用？

谢谢！

Answer 1

srcset 可让您根据媒体加载不同的（内容）图像。

媒体查询让您可以根据媒体应用不同的 CSS 规则。

将一个用于图像，另一个用于 CSS。

Answer 2

检查一下 in-depth article about this.

由于您同时询问这两个问题，我假设您询问的是如何实现“响应式图像”的目标（提供给基于每个设备的正确大小的图像）分辨率）同时使用。

现在，您可以制定一些策略来实现这一目标（不显示特定屏幕尺寸不需要的 img 元素）使用媒体查询。但是，也有一些缺点。

让我引用上面链接的文章：

媒体查询对像素密度的支持有限。因为这， 图像不会在所有设备上正确选择 & 看起来 模糊。此外，除非您“懒惰”加载图像，否则浏览器将加载 所有尺寸。 （即使它们设置为显示：无）这会击败 目的。 srcset 没有这些问题。

基本上，srcset 是更好的工具，旨在解决这个问题。