通过媒体查询更改图像

Question

我希望在显示小于400px时更改图像（为此目的，我无法将图像用作背景）。我想用display:block显示1并用display: none隐藏另一个。

我的问题是，如果我这样做，浏览器会加载两个图像并隐藏其中一个或者只加载其中一个吗？ （display:block）。 如果浏览器加载两个图像我需要找到一种方法来改变图像的src

Answer 1

为避免加载图像两次（不使用普通的css mediaqueries），可以使用window.matchMedia（JS）;

var breakpoint = window.matchMedia( "(min-width: 400px)" )

if (breakpoint.matches) {
    // window width is at least 400px
   // you load one img
}
else {
    // window width is less than 400px
    // you load other img
}

Answer 2

好的..你可以查看这个stackoverflow帖子，Media queries and background images你必须使用min-width和mix-width到css中，并且有一个网页提供有关mediaquery资产的更多信息http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 3

您还可以使用响应式图片 - 经典<picture>的新srcset代码或<img>属性。这里很好地解释了：

http://responsiveimages.org/

它仍然是一种非常新的技术，并且所有浏览器都不支持它（srcset，picture），但是有一些模拟它的polyfill（即Picturefill）通过JavaScript。