如何使用静态 Header 创建响应式网页？

Question

我对刚刚创建的 header 非常满意：

但不幸的是，这个项目的目标是创建一个使用行和列的响应式网站。我们被指示使用 12 列网格系统。第一行包括导航栏上方的所有内容，徽标和标题占据前 10 列，社交媒体链接占据最后 2 列。最初，标题 ("knights basketball academy") 和社交媒体链接应该在调整页面大小时包裹在徽标下方。但现在我改变主意了，因为结果是一场灾难：

我知道可以解决这个问题，但是白色会太多 space 而且我真的只需要导航栏和它下面的内容无论如何都能响应。因此，当页面缩小到移动设备时，它应该如下所示：

请注意徽标和 header 不会随着页面大小的调整而改变。如果您知道如何获得这种效果，请帮忙。我想它可能与容器有关，但我不确定。谢谢！

HTML:

<!DOCTYPE html>
  <html>
  <head>
    <title>Knights Basketball Academy</title>
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

<body>
  <header>
    <div class="row">
      <!--first row-->
      <div class="col-10">

        <div class="logo">
          <a href="index.html">
            <img src="images/logo2.png" alt="logo" height="250" width="250">
          </a>
        </div>

        <div class="header">
          <img src="images/header.png" alt="header" height="250" width="880">
        </div>
      </div>
      <div class="col-2">
        <div class="social_twitter">
          <a href="#"><img src="images/twitter.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/facebook.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/youtube.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/instagram.png"></a>
        </div>

      </div>
    </div>
    <!--ends first row-->
  </header>


  <div class="navigation">
    <nav>
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="roster.html">ROSTER</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">CALENDAR</a></li>
      </ul>
    </nav>
  </div>


  <div class="row">
    <!--second row-->

    <div class="col-3 col-m-3">
      <img src="images/image1.jpg" alt="Team Photo">
    </div>

    <div class="col-6 col-m-9">
      <h1>Welcome</h1>

      <p>Knights Basketball Academy is a non-profit amateur basketball club focused on individual player development and team concepts. With our elite coaching staff, we are confident that all players can achieve their own maximum potential while maintaining
        excellent character and integrity.
        <br>
        <br> Contact us at info@knightsbasketballacademy.com to learn how to become a Knight today.</p>

    </div>

    <div class="col-3 col-m-12">
      <aside>
        <h2>What?</h2>
        <p>This is information about the website</p>
        <h2>Where?</h2>
        <p>This website was created in St. Louis, MO.</p>
        <h2>How?</h2>
        <p>Visit our contact page for more information.</p>
      </aside>
    </div>

  </div>
  <!--ends second row-->

  <footer>
    <p>&copy;2016 KNIGHTS BASKETBALL ACADEMY</p>
  </footer>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
}

.row:after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}


/*global styles*/

.knights {
  margin-top: 0px
}

.logo {
  float: left;
  margin-left: 10px;
}

.header {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.social {
  float: left;
  margin-left: 2px;
  margin-right: 2px;
}

.social_twitter {
  float: left;
  margin-left: 80px;
}

.banner {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.navigation {
  text-align: center;
  background-color: #000000;
  padding: 0px;
}

#banner {
  text-align: center;
  margin-bottom: 0px;
}

a {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

nav {
  margin: auto;
  height: auto;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

nav li {
  padding: 10px;
  margin-bottom: 7px;
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  margin-left: 30px;
  margin-right: 30px;
}

nav li:hover {
  background-color: #8E8E8E;
}

aside {
  background-color: #C5202A;
  padding: 15px;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

footer {
  background-color: #000000;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
  padding: 15px;
}

img {
  max-width: 100%;
  height: auto;
}


/*mobile phones first*/

[class*="col-"] {
  width: 100%;
}


/*tablet*/

@media only screen and (min-width:600px) {
  /*12 column grid*/
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
  }
}

@media only screen and (min-width:768px) {
  /*12 column grid*/
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
    height: 260px;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
    text-align: center;
  }
}

Answer 1

.logo omg{display: block; max-width: 100%; height: auto;}

试试这个

Answer 2

class="navbar navbar-default navbar-fixed-top" 在 bootstrap 中修复 Header

Answer 3

#header-wrap {
    position: fixed;
    height: 200px;
    top: 0;
    width: 100%;
    z-index: 100;
}

#container{ 
    margin-top: 200px;
}

Answer 4

我已将 header 中的所有内容保持不变，以下是我所做的更改。

HTML:

<header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
    <div id="images">


        <a href="index.html">
          <img id="logo" src="images/logo2.png" alt="logo" 
           height="250" width="250">
        </a>



        <img id="text" src="images/header.png" alt="header"
         height="250" width="880">

    <div id="socialIcons">

        <div  class="social">
        <a href="#"><img src="images/twitter.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/facebook.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/youtube.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/instagram.png"></a>
        </div>
    </div>
    </div>
 </div>
</div>
</header>

CSS:

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}

/*global styles*/   
#header-wrap {position:relative;
              top:0;
              width:100%;
              min-height:260px;
              height:100%;
              z-index:9999;
              background:#fff;}

#fixed {position:fixed;
    width:100%;
    top:0;
    background-color:#fff;}

.knights {margin-top:0px}

.logo img {max-width:100%;
           height:auto;}

img#logo {width:300px;
          float:left;
          margin-left:10px;}

img#text {margin-top:50px;
          float:left;
          margin-left:70px;
          width:650px;}

#images {width:1400px;}

#socialIcons {padding-top:10px;
              margin-left:1264px;}

.fixed{position:fixed;
       width:100%;
       top:0;
       background-color;}  

.social {float:left;
        margin-left:2px;
        margin-right:2px;}

.banner {display: inline-block;
         margin-left:auto;
         margin-right:auto;}


.navigation {text-align:center;
             background-color:#000000;
             padding:0px;
             margin-top:30px;}

#banner {text-align:center;
         margin-bottom: 0px;}

a{text-decoration:none;
  color:white;}

a:visited {color:white;}

nav{margin:auto;
    height:auto;}

nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-family:Arial;}

nav li {
    padding: 10px;
    margin-bottom: 7px;
    background-color :#000000;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display:block;
    margin-left:30px;
    margin-right:30px;}


nav li:hover {
     background-color: #8E8E8E;}

aside{background-color:#C5202A;
      padding:15px;
      color:#fff;
      text-align:center;
      font-size:1.1em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);}

footer{background-color:#000000;
      color:#fff;
      text-align:center;
      font-size:0.9em;
      padding:15px;}

img{max-width:100%;
    height:auto;}

/*mobile phones first*/
[class*="col-"]{
width:100%;
}

/*tablet*/
@media only screen and (min-width:600px)
{

/*12 column grid*/

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

nav {height:auto;}

nav li {display:inline-block;}

}   

@media only screen and (min-width:768px)
{   

/*12 column grid*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;height:260px;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}  

nav {height:auto;}

nav li {display:inline-block;
    text-align:center;}  

}


div.clear { clear:both;}

所以我在 HTML 中所做的更改是给 header 一个 ID，"header-wrap"，更改 classes "logo"，"text"和"col-2"到ID的"logo"、"text"和"socialIcons"，然后将"social Icons"中的所有class更改为div 到 class "social"（去掉 social_twitter）。

在 CSS 中，我所做的更改是添加“#header-wrap”、"fixed"、“.logo img”、"img#logo"、"img#text"、“#images”、“#socialIcons”和“.fixed”。

这些更改将三个元素 - 徽标、文本图像（骑士篮球学院）和社交媒体链接置于 header 包装内，并用位置：相对和 div (#fixed) 位置：固定。我不确定哪个选择器实际上导致所有三个选择器保持固定，但无论哪种方式，添加这些更改都会导致我的 header 变为静态。

如何使用静态 Header 创建响应式网页？

How to Create Responsive Web Page With Static Header?

html

css

responsive-design

containers

grid-layout