用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媒体查询

回答

相关问题