交換與JavaScript的

我使用的是拉斯維加斯背景Slidehow，我想，當用戶看到的着陸頁，智能手機或平板電腦來交換背景圖像媒體查詢的背景圖像，默認情況下的代碼是：交換與JavaScript的

$('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代碼，在媒體查詢中交換背景圖片？謝謝！

來源

2016-04-25 Davy0324

你不會需要的JavaScript，媒體查詢是通過CSS完成。例如@media和screen（max-width：768）{.vegas {background-image：url（「/ assets/x/y/z」）; }} – chrismillah

你可以樣式添加到頁面這樣的頭元素：

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

雖然由r00k之前提到的，對於媒體查詢你不需要的JavaScript。只需檢查頁面並檢查滑塊插件生成的代碼以及使用CSS項目進行個性化設置。最好的問候。

來源

2016-04-25 14:36:36

要給一個靜態背景圖像，你只能使用CSS，不需要Javascript來做到這一點。

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

此CSS將在屏幕大小，其寬度更小或者等於768px其通常爲片劑標準尺寸僅適用，還可以定義最小寬度屬性這樣的媒體的查詢。

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

此CSS樣式將適用於僅與寬度大的設備然後或等於520px &較小然後或等於768px。您可以使用這兩種組合來實現不同設備尺寸的樣式。

乾杯 Vaibhav的

來源

2016-04-25 14:46:46

交換與JavaScript的

回答

相關問題