响应式 CSS 适用于移动设备，但不适用于桌面设备

Question

我的设计非常拥挤，我很难做出响应。基本上使用“max-width:1024px”媒体查询时，在移动模式下整个布局适合，因为这种模式试图适应 window 中的所有内容，如果我理解正确的话。

问题是对于相同的屏幕尺寸但没有移动模式，它根本不适合。如果在媒体查询中我使 window 的高度更大，比如说 140vh，那么如果在桌面上运行良好但在移动模式下所有元素都太过分了。

基本上我想知道如何为相同尺寸的手机和台式机制作布局。

这是代码：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');

:root {
    --primary: #252b42;
    --green: #1eb589;
    --red: #dc414c;
    --blue: #1da1f2;
    --bc: #20222f;
    --text-light: #8c98c6;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* TOOLS */
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.font-white {
    color: white;
}
.font-grey {
    color: var(--text-light);
}
.font-green {
    color: var(--green);
}
.font-red {
    color: var(--red);
}

/* FONTS */
html {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
h1 {
    font-size: 2rem;
    font-weight: bold;
}
h2 {
    font-size: 1rem;
    font-weight: bold;
}
h3 {
    font-size: 0.9rem;
    font-weight: bold;
}
h4 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 48px;
    letter-spacing: -2px;
}
h5 {
    font-weight: 400;
    letter-spacing: 5px;
}
h6 {
    font-size: 0.9rem;
    font-weight: bold;
}
.number {
    font-size: 2.3rem;
    font-weight: bold;
}

/* ///////////////////////////////////////////// */

/* BODY */
body {
    background-color: var(--bc);
    /* overflow-y: hidden; */
}
.wrapper {
    flex-direction: column;
    height: 100vh;
    /* margin: 2rem auto 4rem; */
    margin: 0 auto;
    width: 80%;
    justify-content: space-evenly;
}
/* Header */
header {
    justify-content: space-between;
}
.dark-mode {
    flex-direction: row;
    align-items: center;
    justify-self: space-between;
}

/* DASHBOARD */

.dashboard {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: space-between;
    column-gap: 28px;
}
/* Grid items */
.dashboard .grid-item {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* width: 255px; */
    height: 216px;
    border-radius: 5px;
    background-color: var(--primary);
}
.color {
    height: 3px;
    width: 100%;
    display: fixed;
    /* margin-top: -2rem; */
    position: absolute;
    top: 0;
    border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
    background-color: var(--blue);
}
#ig {
    background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
    background-color: var(--red);
}
.network {
    display: flex;
    align-items: center;
}
.network .pseudo {
    margin-left: 4px;
}
.followers {
    align-items: center;
}
.number-followers {
    text-align: center;
}
.unit {
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: center;
}
.today {
    display: flex;
    align-items: center;
}
.today img {
    height: 4px;
    margin-right: 5px;
}

/* OVERVIEW */

.overview {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 28px;
}
.overview .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 125px;
    border-radius: 5px;
    background-color: var(--primary);
}
.top-half,
.bottom-half {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

/* HOVER STATES */
.grid-item {
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.grid-item:hover {
    background-color: #333a55;
}

/* RESPONSIVENESS */

@media screen and(max-width: 1280px) {
    html {
        font-size: 13px;
    }

    /* .grid-item {
        width: 215px;
    } */
}

/* Smaller screens */

@media screen and (max-width: 1024px) {
    .wrapper {
        width: 90%;
        /* height: 140vh; */
    }
    .grid {
        grid-gap: 17px;
    }
    /* bottom grid */
    .overview {
        grid-template-columns: repeat(3, 1fr);
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
        <!-- displays site properly based on user's device -->

        <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="./images/favicon-32x32.png"
        />
        <link rel="stylesheet" href="style.css" />

        <title>Frontend Mentor | [Challenge Name Here]</title>

        <!-- Feel free to remove these styles or customise in your own stylesheet  -->
        <style>
            .attribution {
                font-size: 11px;
                text-align: center;
            }
            .attribution a {
                color: hsl(228, 45%, 44%);
            }
        </style>
    </head>

    <body>
        <div class="wrapper flex">
        <header class="flex">
            <div class="title">
                <h1 class="title-1 font-white">Social Media Dashboard</h1>
                <h2 class="font-grey">Total Followers: 23,004</h2>
            </div>
            <div class="dark-mode flex">
                <h2 class="font-grey">Dark Mode</h2>
                <button class="dark-mode-btn"></button>
            </div>
        </header>
        <div class="dashboard grid">
            <div class="grid-item flex">
                <div class="color" id="blue"></div>
                <div class="network">
                    <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1987</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
            </div>
            <div class="grid-item flex">
                <div class="color "id="blue"></div>

                <div class="network">
        
                    <img src="./images/icon-twitter.svg" alt="" class="social-icon" />
                
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1044</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>

            </div>
            <div class="grid-item flex">
                <div class="color" id="ig" ></div>

                <div class="network">
                    <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@realnathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">11k</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
            </div>
            <div class="grid-item flex">
                <div class="color" id="red"></div>
                <div class="network">
                    <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">Nathan F.</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">8239</h4>
                    <h5 class="unit font-grey">Subscribers</h5>
                </div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6  class="font-red">144  Today</h6></div>
            </div>
        </div>
        <h1 class="title-2 font-white">Overview - Today</h1>
        <div class="overview grid">

            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Page Views</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">87</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">5462</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Profile Views</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52k</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Retweets</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">117</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">507</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">107</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Total Views</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">1407</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
                </div>
            </div>
        </div>
          

        <div class="attribution">
            Challenge by
            <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
                >Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
        </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>

Answer 1

CSS 网格 `auto-fill` 和 `auto-fit`

您的代码设置得很好！ CSS Grid 的优点在于您实际上不必使用 @media 查询来获得您正在寻找的功能。使用 CSS 中的 minmax() 函数以及网格 auto-fill 和 auto-fit，您可以实现响应式设计，与您当前拥有的设计相得益彰。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
  --primary: #252b42;
  --green: #1eb589;
  --red: #dc414c;
  --blue: #1da1f2;
  --bc: #20222f;
  --text-light: #8c98c6;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* TOOLS */

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.font-white {
  color: white;
}

.font-grey {
  color: var(--text-light);
}

.font-green {
  color: var(--green);
}

.font-red {
  color: var(--red);
}


/* FONTS */

html {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1rem;
  font-weight: bold;
}

h3 {
  font-size: 0.9rem;
  font-weight: bold;
}

h4 {
  font-size: 4rem;
  font-weight: bold;
  line-height: 48px;
  letter-spacing: -2px;
}

h5 {
  font-weight: 400;
  letter-spacing: 5px;
}

h6 {
  font-size: 0.9rem;
  font-weight: bold;
}

.number {
  font-size: 2.3rem;
  font-weight: bold;
}


/* ///////////////////////////////////////////// */


/* BODY */

body {
  background-color: var(--bc);
  /* overflow-y: hidden; */
}

.wrapper {
  flex-direction: column;
  height: 100vh;
  /* margin: 2rem auto 4rem; */
  margin: 0 auto;
  width: 80%;
  justify-content: space-evenly;
}


/* Header */

header {
  justify-content: space-between;
}

.dark-mode {
  flex-direction: row;
  align-items: center;
  justify-self: space-between;
}


/* DASHBOARD */

.dashboard {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 1fr;
  justify-content: space-between;
  column-gap: 28px;
}


/* Grid items */

.dashboard .grid-item {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  /* width: 255px; */
  height: 216px;
  border-radius: 5px;
  background-color: var(--primary);
}

.color {
  height: 3px;
  width: 100%;
  display: fixed;
  /* margin-top: -2rem; */
  position: absolute;
  top: 0;
  border-radius: 5px 5px 0 0;
}


/* sticker colors */

#blue {
  background-color: var(--blue);
}

#ig {
  background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}

#red {
  background-color: var(--red);
}

.network {
  display: flex;
  align-items: center;
}

.network .pseudo {
  margin-left: 4px;
}

.followers {
  align-items: center;
}

.number-followers {
  text-align: center;
}

.unit {
  margin-top: 1rem;
  text-transform: uppercase;
  text-align: center;
}

.today {
  display: flex;
  align-items: center;
}

.today img {
  height: 4px;
  margin-right: 5px;
}


/* OVERVIEW */

.overview {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 28px;
}

.overview .grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 125px;
  border-radius: 5px;
  background-color: var(--primary);
}

.top-half,
.bottom-half {
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}


/* HOVER STATES */

.grid-item {
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.grid-item:hover {
  background-color: #333a55;
}


/* RESPONSIVENESS */

@media screen and(max-width: 1280px) {
  html {
    font-size: 13px;
  }
  /* .grid-item {
        width: 215px;
    } */
}


/* Smaller screens */

@media screen and (max-width: 1024px) {
  .wrapper {
    width: 90%;
    /* height: 140vh; */
  }
  .grid {
    gap: 17px;
  }
}

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
  <link rel="stylesheet" href="style.css" />

  <title>Frontend Mentor | [Challenge Name Here]</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }
    
    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <div class="wrapper flex">
    <header class="flex">
      <div class="title">
        <h1 class="title-1 font-white">Social Media Dashboard</h1>
        <h2 class="font-grey">Total Followers: 23,004</h2>
      </div>
      <div class="dark-mode flex">
        <h2 class="font-grey">Dark Mode</h2>
        <button class="dark-mode-btn"></button>
      </div>
    </header>
    <div class="dashboard grid">
      <div class="grid-item flex">
        <div class="color" id="blue"></div>
        <div class="network">
          <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">@nathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">1987</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">12 Today</h6>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="color " id="blue"></div>

        <div class="network">

          <img src="./images/icon-twitter.svg" alt="" class="social-icon" />

          <h3 class="pseudo font-grey">@nathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">1044</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">99 Today</h6>
        </div>

      </div>
      <div class="grid-item flex">
        <div class="color" id="ig"></div>

        <div class="network">
          <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">@realnathanf</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">11k</h4>
          <h5 class="unit font-grey">FOLLOWERS</h5>
        </div>
        <div class="today"><img src="./images/icon-up.svg"></img>
          <h6 class="font-green">1099 Today</h6 class="font-green">
        </div>
      </div>
      <div class="grid-item flex">
        <div class="color" id="red"></div>
        <div class="network">
          <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
          <h3 class="pseudo font-grey">Nathan F.</h3>
        </div>
        <div class="followers">
          <h4 class="number-followers font-white">8239</h4>
          <h5 class="unit font-grey">Subscribers</h5>
        </div>
        <div class="today"><img src="./images/icon-down.svg"></img>
          <h6 class="font-red">144 Today</h6>
        </div>
      </div>
    </div>
    <h1 class="title-2 font-white">Overview - Today</h1>
    <div class="overview grid">

      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Page Views</h2>
          <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">87</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">3%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">52</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">2%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">5462</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">2257%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Profile Views</h2>
          <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">52k</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">1375%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Retweets</h2>
          <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">117</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">303%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">507</div>
          <div class="today"><img src="./images/icon-up.svg"></img>
            <h6 class="font-green">553%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Likes</h2>
          <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">107</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">19%</h6>
          </div>
        </div>
      </div>
      <div class="grid-item flex">
        <div class="top-half">
          <h2 class="font-grey">Total Views</h2>
          <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
        </div>
        <div class="bottom-half">
          <div class="number font-white">1407</div>
          <div class="today"><img src="./images/icon-down.svg"></img>
            <h6 class="font-red">12%</h6>
          </div>
        </div>
      </div>
    </div>


    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
    </div>
  </div>
  <script src="./app.js"></script>
</body>

</html>

属性已更改：

.overview {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dashboard {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

这里发生的事情如下：

重复函数正在实现 auto-fit 行为
所有网格容器的最小宽度在第一个示例中必须为 200px，在第二个示例中为 300px
一旦容器变得小于该宽度，这些容器就会移到下一行（如果没有可用的，则会创建一个新行）
如果容器超过最小宽度，它们会占用所有可用空间space（1fr/1 小数单位）

这使您可以拥有响应式网格容器，而无需复杂和过多的媒体查询（尽管您的并不复杂）。通常很多人都会遇到网格容器溢出屏幕宽度的问题，但看起来你已经正确设置了所有内容。

如果您想探索网格 auto-fill 和 auto-fit（以及此答案中未讨论的差异），请查看 article 51=]-技巧。

Answer 2

对于响应式布局，您可以像一样使用网格 auto-fit。但是你也只能使用没有显示网格的flex。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');

:root {
    --primary: #252b42;
    --green: #1eb589;
    --red: #dc414c;
    --blue: #1da1f2;
    --bc: #20222f;
    --text-light: #8c98c6;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* TOOLS */
.grid {
    display: grid;
}
.flex {
    display: flex;
}
.font-white {
    color: white;
}
.font-grey {
    color: var(--text-light);
}
.font-green {
    color: var(--green);
}
.font-red {
    color: var(--red);
}

/* FONTS */
html {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
h1 {
    font-size: 2rem;
    font-weight: bold;
}
h2 {
    font-size: 1rem;
    font-weight: bold;
}
h3 {
    font-size: 0.9rem;
    font-weight: bold;
}
h4 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 48px;
    letter-spacing: -2px;
}
h5 {
    font-weight: 400;
    letter-spacing: 5px;
}
h6 {
    font-size: 0.9rem;
    font-weight: bold;
}
.number {
    font-size: 2.3rem;
    font-weight: bold;
}

/* ///////////////////////////////////////////// */

/* BODY */
body {
  background-color: var(--bc);
  /* overflow-y: hidden; */
}
.wrapper {
  flex-direction: column;
  height: 100vh;
  /* margin: 2rem auto 4rem; */
  margin: 0 auto;
  width: 80%;
  justify-content: space-evenly;
}
/* Header */
header {
    justify-content: space-between;
}
.dark-mode {
    flex-direction: row;
    align-items: center;
    justify-self: space-between;
}

/* DASHBOARD */

.dashboard {
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* grid-template-rows: 1fr; */
    /* justify-content: space-between; */
    /* column-gap: 28px; */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Grid items */
.dashboard .grid-item {
    flex-basis: calc(calc(700px - 100%) * 9999);
    flex-shrink: 1;
    flex-grow: 1;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* width: 255px; */
    height: 216px;
    border-radius: 5px;
    background-color: var(--primary);
}
.color {
    height: 3px;
    width: 100%;
    display: fixed;
    /* margin-top: -2rem; */
    position: absolute;
    top: 0;
    border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
    background-color: var(--blue);
}
#ig {
    background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
    background-color: var(--red);
}
.network {
    display: flex;
    align-items: center;
}
.network .pseudo {
    margin-left: 4px;
}
.followers {
    align-items: center;
}
.number-followers {
    text-align: center;
}
.unit {
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: center;
}
.today {
    display: flex;
    align-items: center;
}
.today img {
    height: 4px;
    margin-right: 5px;
}

/* OVERVIEW */

.overview {
    /* grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 28px; */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.overview .grid-item {
    flex-basis: 300px;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 125px;
    border-radius: 5px;
    background-color: var(--primary);
}
.top-half,
.bottom-half {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

/* HOVER STATES */
.grid-item {
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.grid-item:hover {
    background-color: #333a55;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
        <!-- displays site properly based on user's device -->

        <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="./images/favicon-32x32.png"
        />
        <link rel="stylesheet" href="style.css" />

        <title>Frontend Mentor | [Challenge Name Here]</title>

        <!-- Feel free to remove these styles or customise in your own stylesheet  -->
        <style>
            .attribution {
                font-size: 11px;
                text-align: center;
            }
            .attribution a {
                color: hsl(228, 45%, 44%);
            }
        </style>
    </head>

    <body>
        <div class="wrapper flex">
        <header class="flex">
            <div class="title">
                <h1 class="title-1 font-white">Social Media Dashboard</h1>
                <h2 class="font-grey">Total Followers: 23,004</h2>
            </div>
            <div class="dark-mode flex">
                <h2 class="font-grey">Dark Mode</h2>
                <button class="dark-mode-btn"></button>
            </div>
        </header>
        <div class="dashboard">
            <div class="grid-item flex">
                <div class="color" id="blue"></div>
                <div class="network">
                    <img src="./images/icon-facebook.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1987</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
            </div>
            <div class="grid-item flex">
                <div class="color "id="blue"></div>

                <div class="network">
        
                    <img src="./images/icon-twitter.svg" alt="" class="social-icon" />
                
                    <h3 class="pseudo font-grey">@nathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">1044</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>

            </div>
            <div class="grid-item flex">
                <div class="color" id="ig" ></div>

                <div class="network">
                    <img src="./images/icon-instagram.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">@realnathanf</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">11k</h4>
                    <h5 class="unit font-grey">FOLLOWERS</h5>
                </div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
            </div>
            <div class="grid-item flex">
                <div class="color" id="red"></div>
                <div class="network">
                    <img src="./images/icon-youtube.svg" alt="" class="social-icon" />
                    <h3 class="pseudo font-grey">Nathan F.</h3>
                </div>
                <div class="followers">
                    <h4 class="number-followers font-white">8239</h4>
                    <h5 class="unit font-grey">Subscribers</h5>
                </div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6  class="font-red">144  Today</h6></div>
            </div>
        </div>
        <h1 class="title-2 font-white">Overview - Today</h1>
        <div class="overview">

            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Page Views</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">87</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-facebook.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">5462</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Profile Views</h2>
                <img src="./images/icon-instagram.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">52k</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Retweets</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">117</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-twitter.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">507</div>
                <div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Likes</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">107</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
                </div>
            </div>
            <div class="grid-item flex">
                <div class="top-half">
                <h2 class="font-grey">Total Views</h2>
                <img src="./images/icon-youtube.svg" alt="" class="media-icon" />
                </div>
                <div class="bottom-half">
                <div class="number font-white">1407</div>
                <div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
                </div>
            </div>
        </div>
          

        <div class="attribution">
            Challenge by
            <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
                >Frontend Mentor</a
            >. Coded by <a href="#">Thomas M.</a>.
        </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>

变化是：

.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard .grid-item {
    flex-basis: calc(calc(700px - 100%) * 9999);
    flex-shrink: 1;
    flex-grow: 1;
}

.overview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.overview .grid-item {
    flex-basis: 300px;
    flex-shrink: 1;
    flex-grow: 1;
}

我正在向 .dashboard 和 .overview[= 添加 flex-basis、flex-shrink 和 flex-grow 属性54=] child仁.

flex-basis 将设置弹性项目的主要尺寸。

例如，如果我们将基准设置为 300px，则宽度将为 300px。但是我们有 flex-grow 和 flex-shrink 允许 child 在值为 1 时从其主要大小增长或缩小。

flex-shrink 默认值为 1

flex-grow 默认值为 0

当 parent 宽度 > 600px 时它将有 2 列 (600px / 2 = 300px)

当 parent 宽度 < 300px 如果 flex-shrink 值 = 1
，child 将收缩
当 parent 宽度为 400px 时 child 将增长到 400px 如果 flex-grow 值 = 1

负 flex-basis 值无效。

对于 calc(calc(700px - 100%) * 9999);，当 parent 宽度达到 < 700px 时，flex-basis 将具有很大的值，这将使 parent 只有一列。当 parent 宽度 > 700px 时，基础值为负数，然后 flex-basis 将设置为默认值，即 auto.

响应式 CSS 适用于移动设备，但不适用于桌面设备

Responsive CSS works on mobile but not on desktop

css

responsive-design

CSS 网格 `auto-fill` 和 `auto-fit`

这里发生的事情如下：

响应式 CSS 适用于移动设备，但不适用于桌面设备

Responsive CSS works on mobile but not on desktop

css

responsive-design

CSS 网格 auto-fill 和 auto-fit

这里发生的事情如下：

CSS 网格 `auto-fill` 和 `auto-fit`