html – 通过媒体查询更改图像

2023年9月10日 457次阅读

我想在显示器小于400px时更改图像(为此我不能使用图像作为背景).我想用display：block来显示1,用display：display来隐藏另一个.

我的问题是,如果我这样做,浏览器会加载两个图像并隐藏其中一个或者只加载其中一个吗？ (显示：块).
如果浏览器加载两个图像我需要找到一种方法来改变图像的src

最佳答案 为了避免加载图像两次(不使用普通的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
}
点赞