为什么我的页眉部分对于移动设备来说太宽了？

Question

我正在制作这个网站及其对所有其他尺寸的响应，但是当我的宽度达到 414 像素左右时，介绍部分对于屏幕来说太宽了，有人知道是什么原因造成的吗？ html:

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="logoDiv">
    <img src="img/logo.png" class="logo" alt="">
  </div>
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#features" class="page-scroll">Specials</a></li>
        <li><a href="#about" class="page-scroll">About</a></li>
        <li><a href="#restaurant-menu" class="page-scroll">Menu</a></li>
        <li><a href="#contact" class="page-scroll">Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</nav>
<!-- Header -->
<header id="header">
  <div class="intro">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="intro-text">
            <h1>GRAZE CAFE</h1>
            <p>Reservations: 0448708939</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

css:

.intro {
    display: table;
    width: 100%;
    padding: 0;
    background: url(../img/banner.jpg) center center no-repeat;
    background-color: #e5e5e5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.intro .overlay {
    background: rgba(0,0,0,0.4);
}
.intro h1 {

 font-family: 'Old Standard TT', serif;
    color: #fff;
    font-size: 9em;
    font-weight: 90;
    margin-top: 0;
}
@media (max-width: 500px) {
#header{
    width: 100%
}
}

}
.intro span {
    color: #a7c44c;
    font-weight: 600;
}
.intro p {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    margin-top: 150px;
}
.hide{
    visibility: hidden;
}
header .intro-text {
    padding-top: 200px;
    padding-bottom: 50px;
    text-align: center;
}

我不确定该部分中的哪个元素导致该部分太宽。 None 的元素具有固定宽度，除了导航栏中的徽标，即使我将元素宽度设置为 300px 左右，页面上仍然有空白 space。

Answer 1

您遇到此问题是因为您将 em 用于 font-size，这使得它对于任何浏览器都有固定的计算大小，因为 em 是相对于 font-size 的元素。因此，如果您希望此网页具有响应性，请使用长度测量值，例如 vw,vh 或 %.

为什么我的页眉部分对于移动设备来说太宽了？

Why is my header section too wide for mobile?

html

javascript

css

responsive-design