网格|移动优化

发布于 2025-01-23 00:35:45 字数 3724 浏览 0 评论 0原文

我正在尝试复制这种网格 desktop版本。我能够在上面复制此桌面版本，但是我还需要创建优化的移动版本。一旦尺寸达到平板电脑的大小，它就会显示为平板电脑大小约1269x874 然后移动版本看起来为移动大小约750x874 。手机和平板电脑之间的区别是按钮的位置。无论如何，我不知道的是如何优化它并使我的代码看起来一样。所有的帮助都将受到赞赏，并事先感谢您。

PS：我也无法弄清楚如何将按钮以指定的正方形为中心。

PSS：大小参考来自F12控制台

编辑：我已更新了代码以显示我尝试过的媒体查询

<!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;
    }

  @media only screen and (max-width: 1279px) {
    grid{
      display: grid;
      grid-template-columns: repeat(3, 2fr);
      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 -->
    <div class="1">
      <p class="quote">"Lingerie is not about seducing men;
        It's about embracing womanhood"<br><br> - Dita Von Teese </p>

    </div>

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

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

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

    <div class="5">
      <button class="button button2"><a href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a></button>
    </div>

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

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

    <div class="8">
      <p>Image goes here, delete this text</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.</p>
    </div>

  </div>



</body>

</html>

原文

I am trying to replicate this style of grid Desktop Version. I was able to replicate this desktop version above, but What I also need is to create an optimized mobile version. Once the dimensions get to about tablet size it appears as so Tablet size about 1269x874 and then mobile version appears as so mobile size about 750x874. The difference between mobile and tablet is the location of the button. Anyway, what I cannot figure out is how to optimize this and make my code appear as the same. All help is appreciated and thank you in advance.

PS: I also cant figure out how to center my button in its designated square.

PSS: The sizing references was obtained from F12 console

EDIT: I have updated the code to show the media query I have tried

<!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;
    }

  @media only screen and (max-width: 1279px) {
    grid{
      display: grid;
      grid-template-columns: repeat(3, 2fr);
      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 -->
    <div class="1">
      <p class="quote">"Lingerie is not about seducing men;
        It's about embracing womanhood"<br><br> - Dita Von Teese </p>

    </div>

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

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

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

    <div class="5">
      <button class="button button2"><a href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a></button>
    </div>

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

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

    <div class="8">
      <p>Image goes here, delete this text</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.</p>
    </div>

  </div>



</body>

</html>

分享到QQ

分享到微博