javascript - 根据窗口高度添加CSS

Question

我有一个弹出窗口，只要观众使用大屏幕(超过 750 像素高)，它看起来就很棒。我想添加一个 CSS 选择器来为在笔记本电脑上查看的人推送重要内容(并隐藏标题和可消耗的介绍信息)。我认为最简单的方法是将 body 标签提高到 -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 */
}