结合@media查询和javascript动态更改css_Javascript_Jquery_Html_Css_Media Queries

结合@media查询和javascript动态更改css

javascript jquery html css

结合@media查询和javascript动态更改css,javascript,jquery,html,css,media-queries,Javascript,Jquery,Html,Css,Media Queries,如果有人向下滚动页面，我将使用以下代码更改AD css $(document).ready(function() { $("#results").scroll(function () { var top = $("#results").scrollTop(); if (top > 25) { $("thead").css({ 'position':'f

如果有人向下滚动页面，我将使用以下代码更改AD 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>
...

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

因为您在jQuery中执行此操作，所以不需要使用媒体查询。您只需使用$window.width和$window.resize即可：

您要做的是选择媒体查询，据我所知，这是不可能的

如果您希望在css文件中使用媒体查询时，当屏幕大小低于某个特定值时，AD标记消失：

<!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>

在这种情况下，AD在1024屏幕宽度上消失如果需要，可以使用jQuery解决方案

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

在这种情况下，我建议您查看此页面可能会很有用。。参考此

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