Question

我正在尝试让我的网站响应，所以首先我将字体大小和粘性顶部栏的高度调整为窗口大小，结果如下：

字体大小确实发生了变化，但是太小了以至于在某些时候，按钮下方有一点空间，没有填充按钮，这是我需要解决的问题。
顶栏的高度没有调整，也许我做了数学计算错误，但我需要一些帮助。

请注意，我只上传了有用的CSS代码

这是我的CSS：

#bar {
    display:inline-block;
    width: 100%;
    height: 50px;
    max-height:50px;
    background-color: #595959;
    box-shadow: 0px 2px 2px #888888;
    z-index:9999;
}

.bar-fixed {
    top: 0;
    z-index: 3;
    position: fixed;
    width: 100%;
}

#bar nav {
    margin-left:50px;
    margin-right:50px;
}

#bar nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #595959;
}

#bar nav ul li{
    display: inline;
    float: left;
}

#bar nav ul li a{
    display: block;
    color:  #e6e6e6;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#bar nav ul li a:hover {
    background-color:black;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#bar nav ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #595959;
}

#bar nav ul ul li {
    display: block;
    float: right;
}

#bar nav ul ul li a{
    display: block;
    color:  #e6e6e6;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;  
}

#bar nav ul ul li a:hover {
    background-color:black;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

html { font-size: 90.5%; }

body {
    padding: 0px;margin:0px;font-size: 1.1rem;
}

这是我的HTML：

<div class="topsec">
  <div id="bar">
    <nav>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
      <ul >
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </ul
  </nav>
</div>
<div class="wrapper">
  <article class="main">
  </article>
  <aside class="aside LB"></aside>
  <aside class="aside RB"></aside>
  <footer class="footer"></footer>
</div>

这是我的jquery：

$(document).ready(function() {
  $(window).scroll(function () {
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 59) {
      $('#bar').addClass('bar-fixed');
    }
    if ($(window).scrollTop() < 60) {
      $('#bar').removeClass('bar-fixed');
    }
  });
});
$(document).ready(function () {
  var holdWidth = $(window).width();
  var holdHeight = $(window).height();
  var holdAverageSize = (holdWidth + holdHeight) / 2;
  $(window).on('resize', function () {
    newAverageSize = ($(window).width() + $(window).height()) / 2;
    newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
    $("html").css("font-size", newPercentage)
    $("#bar").css("height", newPercentage) /* am pretty sure this couldn't work because i am assigning a % to a porperty i a already set with px */
    console.log(newPercentage);
  });
});

Answer 1

您需要使用$(document).height()和$(document).width()。我认为这应该解决它。

Answer 2

关于你的第二点：

在＆＃39; #bar＆＃39;的规则中您同时拥有height: 50px; 和 max-height:50px;（这是多余的，因为height已修复为50px）。

所以在某个地方，你有媒体查询/其他规则，以便＃bar;＃bar＆＃39;在另一个视口宽度。如果该第二条规则仅包含height 或 min-height（并且如果在您的问题中显示的规则之后被称为），这仍然会将其他（未包含）参数保留在此规则的值中。

编辑：例如，响应式规则可能包含max-height: 30px，但由于一般规则中仍有height: 50px，#bar将保持50像素高。这可能是你的标题没有调整高度的原因。

所以你必须列出它们，例如包括max-height: none;或height: auto;到＆＃34;中和＆＃34;它们。

根据窗口大小自动调整高度大小，并使按钮填充空间

2 个答案: