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

时间：2021-01-02 18:51:51

标签： css responsive-design

我有一个非常拥挤的设计，我无法做出响应。 基本上使用“max-width:1024px”媒体查询，整个布局在处于移动模式时适合，因为如果我理解正确，这种模式会尝试适合窗口中的所有内容。

问题在于，对于相同的屏幕尺寸但没有移动模式，它根本不适合。 如果在媒体查询中我将窗口的高度设置得更大，比如说 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>

2 个答案:

答案 0 :(得分：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));
}

这里发生的事情如下：

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

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

如果您想探索网格 auto-fill 和 auto-fit（以及本答案中未讨论的差异），请查看 CSS-Tricks 的这个很棒的 article。

答案 1 :(得分：1)

对于响应式布局，您可以使用网格 auto-fit，例如 Raheel Junaid's answer。但是你也只能使用 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 属性。

  • flex-basis 将设置弹性项目的主要尺寸。
  • 例如，如果我们将基础设置为 300 像素，则宽度将为 300 像素。但是我们有 flex-grow 和 flex-shrink，如果值为 1，则允许子项从其主要大小增长或缩小。
  • flex-shrink 默认值为 1
  • flex-grow 默认值为 0
  • 当父宽度 > 600px 时，它将有 2 列 (600px / 2 = 300px)
  • 当父级宽度 < 300px 时，如果 flex-shrink 值 = 1，子级将缩小
  • 当父级宽度为 400 像素时，如果 flex-grow 值 = 1，子级将增长到 400 像素
  • 负 flex-basis 值无效。
  • 对于 calc(calc(700px - 100%) * 9999);，当父级宽度达到 < 700px 时，flex-basis 将具有很大的值，这将使父级只有一列。当父宽度 > 700px 时，基值将为负数，然后 flex-basis 将设置为默认值 auto。
相关问题
最新问题