用JS編輯CSS媒體查詢

我需要通過JS設置背景大小。這是我目前的CSS代碼，做我需要什麼（無縫基於方向集大小％）用JS編輯CSS媒體查詢

background-size: 50%; 
@media all and (orientation:landscape) { 
    background-size: auto 50%; 
}

我需要改變50％價值的兩個實例在上面的代碼。現在我有這個

element.css("background-size", foo.toFixed(0) + '%');

這個工作，但丟棄媒體查詢。這怎麼解決？

來源

2014-11-03 ZanQdo

定義了一個class/id。設置類/ id的屬性。 – 2014-11-03 16:39:35

用jQuery的'css'函數做這件事是不可能的，因爲它通過設置內聯'樣式'屬性來工作。 [媒體查詢不適用於內聯樣式。]（http://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline） – lonesomeday 2014-11-03 16:40:47

謝謝，澄清事情 – ZanQdo 2014-11-03 16:56:39

要添加條件，檢查窗口大小是否景觀，你可以使用：

if(window.innerHeight < window.innerWidth){ 
    element.css("background-size", foo.toFixed(0) + '%'); 
}

如果你使用這個移動的發展，我會看看jQuery的移動圖書館。

Source

來源

2014-11-03 16:41:07 danhardman

如果你只是檢查的方向變化，你可以使用：

window.addEventListener('orientationchange', doSomethingOnOrientationChange)

但如果你真的要檢查媒體查詢被觸發，你可以使用Window.matchMedia()監聽媒體查詢事件：

if (matchMedia) { 
    var mm = window.matchMedia("(orientation:landscape)"); 
    mm.addListener(onMatchedMedia); 
    onMatchedMedia(mm); 
} 
function onMatchedMedia(mm) { 
    if(mm.matches){ 
     el.style.backgroundSize = 'auto ' + foo.toFixed(0) + '%'; 
    } else { 
     el.style.backgroundSize = foo.toFixed(0) + '%'; 
    } 
}

下面是使用max-width演示： http://jsfiddle.net/wxgs9g9s/

來源

2014-11-03 17:13:55 Moob

用JS編輯CSS媒體查詢

回答

相關問題