html - 响应式图像和媒体查询

Question

我有点确定这是不可能的，但我问是因为这似乎令人难以置信。

我为响应式设计设计了一些元素

img {max-width:100%;height:auto;}

但图片必须因设备而异(我不会在手机设备上加载宽屏图片)。

由于内联不支持媒体查询，我可以寻求 css 背景解决方案，但背景大小并未得到完美支持，老实说，它看起来更像是一个 hack。

谁能确认“广泛支持的设备相关响应图像”是不可能的？

谢谢

Answer 1

如果我正确理解您的问题，您正在寻找一种方法来根据视点提供不同的图像。

Adaptive Images可能是您正在寻找的解决方案。很容易设置和确认。

第二种可能会给你更多的控制权是 Adapt.js .我已经在多个站点上成功地使用了它。您在文档的头部加载一个小的 javascript 文件。这会测试视点宽度，然后根据结果发送适当的 CSS 文件。它比@media 请求具有更广泛的浏览器支持。

如果您可以忍受使用背景图片，那么它会工作得很好，并且由于您可以为不同的视点指定不同的图片，所以您不会被不理解背景图片大小的浏览器所困扰。

祝你好运!