html - 如何使用静态标题创建响应式网页？

我真的很高兴我刚刚创建的标题：
但是不幸的是，这个项目的目标是使用行和列创建一个响应的网站。我们奉命使用12列网格系统。第一行包括导航栏上方的所有内容，徽标和标题占据前10列，社交媒体链接占据后2列。最初，当页面大小调整时，标题（“骑士篮球学院”）和社交媒体链接应该包装在徽标下面。但现在我改变主意了，因为结果是一场灾难：
我知道这是可能的，但会有太多的空白，我真的只需要导航栏和它下面的内容是响应无论如何。因此，当页面被压缩到mobile时，它应该是这样的：
请注意，在调整页面大小时，徽标和页眉不会更改。如果你知道如何获得这种效果，请帮忙。我想可能是用集装箱装的，但我不确定。谢谢您！
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;
  }
}

最佳答案

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

试试这个

关于html - 如何使用静态标题创建响应式网页？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35286338/