Question

我使用Vegas Background Slidehow，当用户在智能手机或平板电脑上看到目标网页时，我想交换背景图片，默认情况下代码为：

$('body').vegas({
    delay: 15000,
    timer: false,
    transitionDuration: 2000,
    slides: [
        { src: 'img/background/0.jpg' },
        { src: 'img/background/1.jpg' },
        { src: 'img/background/2.jpg' }
    ],
    transition: 'swirlRight',
    animation: 'kenburns'
});

如何编写背景图片在媒体查询中交换的javascript代码？谢谢！

Answer 1

您可以将样式附加到页面的head元素，如下所示：

$('head').append('<style>@media (min-width: 1000px){ .my-style{ background-color: #000; } }</style>');

虽然如前所述r00k，但对于媒体查询，您不需要javascript。只需检查页面并检查滑块插件生成的代码，并使用css对幻灯片项目进行个性化设置。最诚挚的问候。

Answer 2

要提供静态背景图像，您只能使用CSS，不需要Javascript来执行此操作。

@media(max-width:768px){ 
    .vegas{ 
        background-image:url("/assets/x/y/z"); 
    }
}

此CSS仅适用于宽度小于或等于768px的屏幕尺寸，这通常是平板电脑的标准尺寸，您也可以像这样定义媒体查询的min-width属性。

@media(max-width:768px) and (min-width: 520px){ 
    .vegas{ 
        background-image:url("/assets/x/y/z"); 
    }
}

此CSS样式仅适用于宽度大于或等于520px＆amp;的设备。小于或等于768px。您可以结合使用这两种方法来实现不同设备尺寸的样式。

干杯 Vaibhav的

使用javascript交换媒体查询的背景图像

2 个答案: