Javascript高度和媒体查询同时进行答案

【问题标题】：Javascript height and media query at the same timeJavascript高度和媒体查询同时进行
【发布时间】：2015-01-16 22:07:00
【问题描述】：

我假设这是可能的，但我可能错了。

我正在练习制作移动网站，我想要以下 2 个功能的组合 - 向下滚动时缩小菜单栏的 Javascript。当方向为横向时，媒体查询显示更大的菜单栏。

我有两者的代码 - Javascript -

<script>
             $(document).scroll(function(){
        if ($(this).scrollTop()>1){
            // animate fixed div to small size:
            $('.container').stop().animate({ height: 40 },100);
            $('.menuicon').stop().animate({ height: 40, width: 40 },100);
        } else {
            //  animate fixed div to original size
            $('.container').stop().animate({ height: 100},100);
            $('.menuicon').stop().animate({ height: 100, width: 100},100);
        }
    }); 

    </script>

媒体查询-

@media all and (orientation:landscape) {  
    .container{
    height:16%;
    }
    .menuicon{
    width:16%;
    }

    #menu{
    padding-top:16%;
            }
}

媒体查询在 javascript 之前运行良好，但是由于定义了前后高度，它不再根据方向而改变。

有没有办法在我的 javascript 中包含这样的媒体查询？

谢谢！

【问题讨论】：

你可以在css中用!important覆盖js设置的内联高度
感谢您的评论！老实说，直到现在我什至都不知道！important。从快速阅读来看，我似乎把 if 放在了 16% 之后，但它似乎没有改变任何东西。我猜我做错了。
我不知道你所说的“它似乎放在 16% 之后”是什么意思
对不起，应该解释得更好。所以离开这个例子就好像它应该被放置 - {padding-top:16% !important;} 等等。
是的，语法正确

标签： javascript css height media-queries

【解决方案1】：

所以我决定走一条不同的路线。

我创建了两组菜单类，一组用于纵向，一组用于横向。我使用 display:none 来隐藏不需要的内容，并使用以下 CSS 来指示要显示的内容 -

@media all and (orientation:landscape) {  
    .containerL{

        display:block;
    }
            .menuiconL{

                display:block;
    }



            #menu{
                padding-top:105px;
            }
} 

        @media all and (orientation:portrait) {
        .containerP{

        display:block;
    }
            .menuiconP{

                display:block;
    }
        }

【讨论】：