スワップjavascriptの

Question

とメディアクエリの背景画像、ユーザーがスマートフォンやタブレットでランディングページを見たときに、デフォルトでコードが私はラスベガスの背景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要素にスタイルを追加することもできます

としてr00kによって前述けど

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

、メディアクエリのためにJavaScriptを必要としません。 ページを調べ、スライダープラグインが生成するコードを確認して、スライドアイテムをCSSでパーソナライズします。 よろしくおねがいします。

Answer 2

静的な背景イメージを表示するには、CSSのみを使用できます.Javascriptを使用する必要はありません。

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

このCSSは、その幅は、一般的に錠剤のための標準的なサイズであるより小さいまたは768pxに等しい画面サイズにのみ適用されます、あなたはまた、このようなメディアクエリーに分-width属性を定義することができます。

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

このCSSスタイルは、幅より大きい又は&より小さいまたは768pxに等しい520pxに等しいとデバイスのみに適用されます。両方の機能を組み合わせて、さまざまなデバイスサイズのスタイリングを実現できます。

乾杯 バイバブは