根据窗口高度添加CSS

Question

只要观看者使用大屏幕（超过750像素高），我就会有一个看起来很棒的弹出窗口。我想添加一个CSS选择器来推送重要内容（并隐藏标题和介绍信息，这是可消费的），供在笔记本电脑上查看的人使用。我认为最简单的方法是将身体标签提高-180像素。

我认为我第一次使用jQuery会很好，但我似乎无法让它工作。我试过了：

if($(window).height() <= 650)
   $(body).css("margin-top","-180px");

以及

$(document).ready(function() {
    if ($(window).height() < 670) {
        $("body").css('margin-top', '-180px');
    }
    else {
        $("body").css('margin-top', '0px');
    }
});​

但似乎都不起作用。如何根据当前窗口高度更改主体样式？

Answer 1

只需使用媒体查询来提供不同的版本或样式：

@media only screen 
and (max-height: 650px) {
    /* Styles */
}