Javascript 如何使用jQuery更改媒体查询CSS

我有两张背景图片，我想用jQuery来改变这一点

对于横幅，它可以工作，但我现在不知道如何为@media屏幕和max width:1024px编写代码

.横幅{ 背景：url../images/640px.jpg 0px 0px无重复； } @媒体屏幕和最大宽度：1024px{ .横幅{ 背景：url../images/900px.jpg 0px 0px无重复； } } var selectData={ 宝马：{ 1:316i， 100:520i， 101:740i， 图1:images/640px.jpg， 图2:images/900px.jpg， }, }; jQuerydocument.readyfunction${ $document.on'click'，'specialLink'，functionevent{ var radio2=document.getElementById'radio2'； 如果radio2.checked==false{ radio2.checked=正确； 切换收音机； } $.regio.html$this.text； 违约事件； var b=$this， 背景图像=； buttonId=b.attr'id'， selectSet=selectData[buttonId]， selectField=$'specialLink'； 选择field.empty； //更改网站的背景图像 $banner.css'background-image'，'url'+selectSet.image1+''； $@媒体屏幕和最大宽度：1024px.css'background-image'，'url'+selectSet.image2+''； 如果选择Set{ //从selectSet中删除图像索引 $.eachselectSet，functionk，v{ 如果k=='string'&&k=='image'{ 返回true； } selectField.append${ 值：k， 正文：v }; }; } 返回false； }; }; 您可以使用jQuery window.resize函数，它将在调整浏览器窗口大小时触发

下面是一个使用jQuery、javascript和css处理调整大小事件的示例。 css，如果您只是在调整媒体查询的大小时进行样式化，那么这是您的最佳选择

将此代码用于所需的解决方案

$(window).resize(function(){
    if ($(window).width() <= 1024){ 
        $('.banner').css('background-image', 'url(' + imageUrl + ')');
    }   
});

---

希望这对您有所帮助。

您可以使用html5的图片标签更改图像

<picture>
    <source media="(min-width: 650px)" srcset="img1.jpg">
    <source media="(min-width: 465px)" srcset="img2.jpg">
    <img src="img3.jpg">
</picture>

可能重复的