响应式图像和媒体查询

时间:2013-04-20 17:12:32

标签: html css responsive-design

我确信这是不可能的,但我问,因为它似乎令人难以置信。

我有一些针对reponsive设计的元素

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

但图像必须根据设备的不同而不同(我不会在手机设备上加载重型宽屏图像)。

由于内联不支持媒体查询,我可以选择css后台解决方案,但背景大小并不完全支持,而且看起来更像是黑客。

任何人都可以确认“广泛支持的与设备相关的响应式图像”不正确吗?

谢谢

4 个答案:

答案 0 :(得分:3)

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

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

可能会给你更多控制的第二种可能性是Adapt.js。我在几个网站上使用它取得了很好的成功。您在文档的头部加载一个小的javascript文件。这将测试视点宽度,然后依赖于结果,它将发送相应的CSS文件。它比@media请求具有更广泛的浏览器支持。

如果您可以使用背景图像,那么它可以很好地工作,并且由于您可以为不同的视点指定不同的图像,因此您不会使用不了解背景图像大小的浏览器。

祝你好运!

答案 1 :(得分:0)

我没有确认任何事情。不可能与jquery / javascript无关。

但事实是,响应式设计有其自身的缺点。 换句话说,定义响应式设计是为了在具有较大浏览器分辨率的设备中显示所有内容,并使用dsiplay:none以CSS隐藏较小分辨率的内容。问题是显示:none不会阻止加载元素。简而言之,也许没有CSS解决方案。而且响应式设计与CSS有关..............

答案 2 :(得分:0)

您可以尝试Responsive Img jQuery plugin

根据容器的宽度,可以在不同的断点处自动创建和交换不同大小的图像。

如果您在创建的映像和服务器上已经有不同的版本,那么插件只会以正确的断点大小交换它们。

因此,您可以为所需的所有不同断点大小创建新图像,插件可以处理其余的断点。

这不是CSS,但它完成了工作。

答案 3 :(得分:0)

2014年更新

这里有一种很好的新技术: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

它需要一个小的js,一个1x1px的空白图像,一些额外的img标记标记,以及一些.htaccess规则。

到目前为止似乎工作正常。