Question

我正在尝试更改我的h1的填充，通过检测到我的页面高度，如果我的屏幕高度介于两者之间，我将更改它 700：800像素，但我的代码无效:(

if ($('.background-wrapper').height() <= 800 && $('.background-wrapper').height() >= 700) {
        $(".login > background-wrapper > h1").css("padding-top", "50px")
    }

HTML：

<div class="background-wrapper">
    <div class="container">
        <div class="row">
            <h1> CRM INTERACTIVE MAP SYSTEM</h1>
        </div>
    </div>
</div>

Answer 1

使用CSS媒体查询

@media only screen and (min-height: 700px) and (max-heigth: 800px) {
   .login > background-wrapper > h1 {
      padding-top: 50px;
   }
}

Answer 2

媒体查询是您的最佳选择。请参阅其他答案。

如果你没有向我们展示可能需要你在javascript中执行此操作的内容：

.background-wrapper不会准确地为您提供屏幕尺寸，它只会给您自己的高度（在某些情况下也可能是屏幕的高度）。

您要使用的是$(window).height()或window.innerHeight。

同样@NiZa指出你的选择器不正确。

Answer 3

如果您不想使用media queries（请参阅@MarcosPérezGude答案），您应该更改一些内容。

首先，您需要更改selector。删除>，因为中间有div。其次，您可以尝试将其放在$( document ).ready()函数中。

最后，请看杰克的回答。使用$(window).height()比div本身更好。

示例

$(document).ready(function() { if ($(windo).height() <= 800 && $(window).height() >= 700) { $(".login > background-wrapper h1").css("padding-top", "50px") } });

jquery如果statment检测到高度

3 个答案: