我怎样才能使这个网站响应？答案

【问题标题】：How I can make this piece of website responsive?我怎样才能使这个网站响应？
【发布时间】：2019-01-12 01:05:33
【问题描述】：

@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 列（如您所见，我仍然应用它），但还是没用。

我怎样才能让它响应？

【问题讨论】：

你的问题可能出在你的 minmax/repeat 函数上？
@vicgoyso 我不明白。他们怎么了？我的意思是重复功能是重复 12 列，每列有 1 个 fr，所以我认为这很好，minmax 是决定每一行的高度并使其对每个项目都可以更改。请解释更多。

标签： html css responsive-design flexbox css-grid

【解决方案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>

【讨论】：

谢谢。但是，我将 justify-content 更改为 space-between 因为这是我想要的方式。它仍然存在一些问题，因为项目没有很好地定位，但我想我会通过媒体查询覆盖它以使其更好。再次感谢您！
@Boypro 不，你不需要空格，因为我使用了 margin:auto 和中间元素，它完全一样;) .. 使用 center i 对于你的小型设备很有用可以看到元素居中而不是左对齐
哦，是的，我忘了边距：auto;

【解决方案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 */
}

【讨论】：