将@media查询与javascript结合以动态更改CSS

Question

如果有人向下滚动页面，我将使用以下代码更改thead CSS

$(document).ready(function()
{       

    $("#results").scroll(function () 
    {               
    var top = $("#results").scrollTop();
        if (top > 25)
            {

             $("thead").css({ 'position':'fixed', 'bottom':'120px', 'width':'95%', 'margin':'2.5%'});
                    }
       }
}

我想根据屏幕尺寸使用媒体查询来更改CSS。 例如，“头”为：

$("@media all and(max-width: 1980px)").{("thead").css({ 'visibility':'hidden' })};

html代码是：

...
<table id="demoTable">
    <thead>
       <tr id="stayontop">
        <th> sth </th>
        <th> sth </th>
        <th> sth </th>
        <th> sth </th>
       </tr>
    </thead>
</table>
...

我的问题是媒体查询不起作用...

Answer 1

由于您是在jQuery中进行的，因此无需使用媒体查询。 您可以只使用$(window).width()和$(window).resize() ：

$(window).resize(function() {
    if ($(window).width() < 1980) {
        $("thead").css("visibility", "hidden");
    }
});

您正在尝试选择媒体查询，据我所知这是不可能的。

Answer 2

如果您希望thead标签在屏幕尺寸小于特定值时消失，则可以在CSS文件中使用媒体查询：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<style>
@media  screen and (max-width: 1024px) {
thead {visibility:hidden; }
}
</style>
</head>
<body>
<table id="demoTable">
    <thead>
       <tr id="stayontop">
        <th> sth </th>
        <th> sth </th>
        <th> sth </th>
        <th> sth </th>
       </tr>
    </thead>
</table>
</body>
</html>

在这种情况下，广告会在1024屏幕宽度上消失
如果您愿意，可以使用jQuery解决方案。

<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() < 1024) {
        $("thead").css("visibility", "hidden");
    }   
})
</script>

在这种情况下，我建议您观看此页面可能会有用http://ryanve.com/lab/dimensions/