网格 |响应式、优化、媒体查询

Question

好的，所以我有一个响应式网格，我正在尝试弄清楚如何让某些方块在某些响应上对齐或放置在不同的位置。我想完全模仿这些照片：Desktop version Tablet Version Mobile Version。这些方块中的每一个我都在上面写了一个数字。在桌面版中，数字只是每个方块的名称，以便于查看。在手机和平板电脑版本中，这些数字代表桌面版本中所述方块的数字。虽然我已经创建了一个响应式网格，但我不知道如何为移动设备和平板电脑重新排列所述网格。

我的按钮也需要帮助。我希望它在指定的正方形中居中，当然我也希望它能够响应。此时还没有随网格缩放。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <style media="screen">
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      text-align: left;
      color: white;
      font-size: 14px;
      font-family: Open Sans, sans-serif;
    }

    .grid>div {
      background: #a100ff;
      padding: 1em;
    }

    .grid>div:nth-child(odd) {
      background: #ff00c3;
    }
    .button {
      border: none;
      color: white;
      padding: 16px 50px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 12px;
      position: center;
    }


    .button2 {
      background-color: white;
      color: black;
      border: 2px solid #008CBA;
      position: absolute;
    }

    .button2:hover {
      background-color: #008CBA;
      color: white;
    }

/* TABLET VIEW */
  @media only screen and (max-width: 1279px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      text-align: left;
      color: white;
      font-size: 14px;
      font-family: Open Sans, sans-serif;
    }
  }

/* MOBILE VIEW */
  @media only screen and (max-width: 759px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      text-align: left;
      color: white;
      font-size: 14px;
      font-family: Open Sans, sans-serif;
    }
  }

  </style>


</head>

<body>
  <div class="grid">
    <!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
    <div class="1">
      <p class="quote">"Lingerie is not about seducing men;
        It's about embracing womanhood"<br><br> - Dita Von Teese (BOX 1)</p>

    </div>

    <div class="2">
      <p>Image goes here, delete this text (BOX 2)</p>
      <img src="" alt="">
    </div>

    <div class="3">
      <p>Image goes here, delete this text (BOX 3)</p>
      <img src="" alt="">
    </div>

    <div class="4">
      <p>Image goes here, delete this text (BOX 4)</p>
      <img src="" alt="">
    </div>

    <div class="5">
      <p>Image goes here, delete this text (BOX 5)</p>
      <a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
    </div>

    <div class="6">
      <p>Image goes here, delete this text (BOX 6)</p>
      <img src="" alt="">
    </div>

    <div class="7">
      <p>Image goes here, delete this text (BOX 7)</p>
      <img src="" alt="">
    </div>

    <div class="8">
      <p>Image goes here, delete this text (BOX 8)</p>
      <img src="" alt="">
    </div>

    <div class="9">
      <p>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the
        only subscription that gets unwrapped TWICE!"<br><br> Wendy S. (BOX 9)</p>
    </div>

  </div>



</body>

</html>

Answer 1

解决前几点：

我认为用数字命名 CSS 类是非常糟糕的做法（然后你必须以这种方式使用 CSS 选择器 [class="1"]{} 或者它不适用于简单的 .1 {})。我们可以比使用 CSS 命名约定更具描述性，例如“box-1”、“image1”、“grid-child-1”（或 BEM 或任何您喜欢的）。

您不必在媒体查询中重复相同的 CSS 声明（例如，在每个媒体查询中设置相同的 font-size），除非您需要覆盖此类声明（例如：在 div 中，在移动 font-size 11px 和桌面 14px).

为了使框居中，我使用了 CSS Flexbox 并删除了绝对位置。

当您链接的模型图像将从图像托管服务器中删除时，我不确定您的回答对 public 有何帮助。

我们应该尝试编写您的模型的架构，以便将来的人能够理解您的问题和答案。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <style media="screen">
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  grid-auto-rows: 1fr;
  text-align: left;
  color: white;
  font-size: 14px;
  font-family: Open Sans, sans-serif;
}

.grid>div {
  background: #a100ff;
  padding: 1em;
}

.grid>div:nth-child(odd) {
  background: #ff00c3;
}
.button {
  border: none;
  color: white;
  padding: 16px 50px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
}

.box-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

/* TABLET VIEW */
  @media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
  grid-gap: 0;
}

.grid>div {
    height: 100%;
}

.box-2,.box-6, .box-7 {
    display: none;
}
.box-8 {
    grid-column: 2;
    grid-row: 3;
}

.box-9 {
    grid-column: 1;
}

  }


/* MOBILE VIEW */
  @media only screen and (max-width: 759px) {
.grid {
  grid-template-columns: 1fr 1fr;
  text-align: left;
  grid-gap: 0;
}

.box-1 {
    grid-row: 3;
    grid-column: 1/3;
}
.box-2 {
    grid-row: 2;
    grid-column: 1;
}
.box-3 {
    grid-row: 2;
    grid-column: 2;
}
.box-5 {
    grid-row: 1;
    grid-column: 1/3;
}

.box-7, .box-8, .box-9 {
    display: none;
}
  }

  </style>


</head>

<body>
  <div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
  <p class="quote">"Lingerie is not about seducing men;
    It's about embracing womanhood"<br><br> - Dita Von Teese (BOX 1)</p>

</div>

<div class="box-2">
  <p>Image goes here, delete this text (BOX 2)</p>
  <img src="" alt="">
</div>

<div class="box-3">
  <p>Image goes here, delete this text (BOX 3)</p>
  <img src="" alt="">
</div>

<div class="box-4">
  <p>Image goes here, delete this text (BOX 4)</p>
  <img src="" alt="">
</div>

<div class="box-5">
  <p>Image goes here, delete this text (BOX 5)</p>
  <a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>

<div class="box-6">
  <p>Image goes here, delete this text (BOX 6)</p>
  <img src="" alt="">
</div>

<div class="box-7">
  <p>Image goes here, delete this text (BOX 7)</p>
  <img src="" alt="">
</div>

<div class="box-8">
  <p>Image goes here, delete this text (BOX 8)</p>
  <img src="" alt="">
</div>

<div class="box-9">
  <p>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the
    only subscription that gets unwrapped TWICE!"<br><br> Wendy S. (BOX 9)</p>
</div>

  </div>



</body>

</html>

网格 |响应式、优化、媒体查询

Grid | responsive, optimization, media query

html

css

grid

media-queries