我如何才能使该网站具有响应能力？

Question

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(680px, auto);
  grid-template-areas: "header header header header header header header header header header header header";
}

header {
  grid-area: header;
  background: url("https://images3.alphacoders.com/536/thumb-1920-53625.jpg") no-repeat;
  background-size: 100% 100%;
}

nav {
  display: flex;
  background: hsla(0, 0%, 0%, 0.15);
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}

ul>li {
  list-style: none;
  margin: 10px;
}

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

.Facebook,
.Youtube {
  max-width: 40px;
  opacity: 0.5;
}

.Facebook:hover,
.Youtube:hover {
  opacity: 1;
}

#social {
  margin: 20px;
}

ul {
  display: flex;
}

ul>li {
  flex: 1 1 auto;
  flex-wrap: wrap;
}

#button {
  justify-self: center;
  align-self: center;
  border: 3px solid white;
  border-radius: 10%;
  color: white;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  left: 100px;
}

#button>h4 {
  margin: 0;
}

#button:hover {
  background-color: white;
  color: black;
  cursor: pointer;
  transition: 0.5s;
}

<div id="grid">

  <header>
    <nav>

      <div id="social">
        <a href="https://www.Facebook.com"><img class="Facebook" src="https://cdn2.iconfinder.com/data/icons/social-media-square-8/64/social_media-09-512.png" alt=""></a>
        <a href="https://www.Youtube.com"><img class="Youtube" src="https://cdn2.iconfinder.com/data/icons/social-media-square-8/64/social_media-49-512.png" alt=""></a>
      </div>

      <div id="button">
        <h4>MAKE A RESERVATION</h4>
      </div>

      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Rooms</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

</div>

我在所有flex父母的孩子身上尝试了flex-wrap，但效果却不尽如人意，有些物品倒塌了。我试图将最大或最小宽度设置为100％或类似的导航。没用我将flex设置为1 1 auto，但是按钮变得非常宽，即使将0 1 auto设置为基本也无法正常工作。

我试图将网格系统设置为12列（我仍然按照您所看到的那样进行应用），再次，这没有任何用处。

我如何使其具有响应性？

Answer 1

您可以这样调整代码：

在代码内添加了注释

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(680px, auto);
  grid-template-areas: "header header header header header header header header header header header header";
}

header {
  grid-area: header;
  background: url("https://images3.alphacoders.com/536/thumb-1920-53625.jpg") no-repeat;
  background-size: 100% 100%;
}

nav {
  display: flex;
  background: hsla(0, 0%, 0%, 0.15);
  /*justify-content: space-between; removed*/
  justify-content: center; /*added*/
  align-items: center;
  flex-wrap:wrap; /*added*/
  position: sticky;
  top: 0;
}
/*added*/
ul {
  padding:0;
}
/*****/

ul>li {
  list-style: none;
  margin: 10px;
}

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

.Facebook,
.Youtube {
  max-width: 40px;
  opacity: 0.5;
}

.Facebook:hover,
.Youtube:hover {
  opacity: 1;
}

#social {
  margin: 20px;
}

ul {
  display: flex;
}

ul>li {
  flex: 1 1 auto;
  /*flex-wrap: wrap; useless*/
}

#button {
  /*justify-self: center;
  align-self: center; removed*/
  margin:auto; /*added*/
  border: 3px solid white;
  border-radius: 10%;
  color: white;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  /*position: relative;
  left: 100px; removed*/
}

#button>h4 {
  margin: 0;
}

#button:hover {
  background-color: white;
  color: black;
  cursor: pointer;
  transition: 0.5s;
}

<div id="grid">
  <header>
    <nav>
      <div id="social">
        <a href="https://www.Facebook.com"><img class="Facebook" src="https://cdn2.iconfinder.com/data/icons/social-media-square-8/64/social_media-09-512.png" alt=""></a>
        <a href="https://www.Youtube.com"><img class="Youtube" src="https://cdn2.iconfinder.com/data/icons/social-media-square-8/64/social_media-49-512.png" alt=""></a>
      </div>
      
      <div id="button">
        <h4>MAKE A RESERVATION</h4>
      </div>

      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Rooms</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

</div>

Answer 2

您需要使用CSS media tag进行自适应设计，并且可以根据宽度调整设计：-

对于移动视图：-

@media only screen and (max-width:767px) {
/* your css will be here and this code will be working just in mobile device */
}

对于iPad视图：-

@media only screen and (min-width:768px) and (max-width:1024px) {
/* your css will be here and this code will be working just in iPad device */
}