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。例如，“thead”是：

$("@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标签在sreen size特定的情况下消失，你就会在你的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>

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

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

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

将@media查询与javascript结合使用可动态更改css

2 个答案: