如何让这个布局响应式？

Question

我正在根据这张图片编写布局。

到目前为止我所得到的都在这个codepen中。

HTML：

    <div class="root-wrapper">
        <div class="sidebar">
          <div id="logo">
              <img src="https://www.logodesign.net/logo/line-art-house-roof-and-buildings-4485ld.png?size=2" width="250" />
          </div>
          
          <nav class="nav flex-column">
            <a class="nav-link" href="#">
              Dashboard
            </a>
          </nav>
        </div>
        
        <div class="content d-block d-xxl-flex">
            <div class="main">
                Content
            </div>

            <div class="aside d-none d-xxl-block">

            </div>
        </div>
    </div>

CSS：

body {
    background: linear-gradient(75deg, #e2ceff 0%, #e9eaff 100%);
}

.root-wrapper {
    margin: 3% 5%;
    padding: 10px 10px 10px 0;
    background-color: #5955b3;
    border-radius: 3rem;

    display: flex;
    flex-direction: row;
    overflow: hidden;

    .content {
        border-radius: 2.8rem;
        background-color: #fff;
        flex-grow: 7;

        display: flex;
        flex-direction: row;
        overflow: hidden;
        min-height: 800px;

        .main {
            flex-grow: 6;
            padding: 2.7rem 2rem;
            // font-size: 1.25rem;

            .page-description {
                padding: 1rem 0;
            }

            // h1 {
            //     color: #5955b3;
            //     font-weight: 900;
            //     font-size: 2.5rem;
            // }

            .card {
                h2 {
                    color: #303030;
                    font-weight: 800;
                }

                &.card-1 {
                    background-color: #f4f4fe;
                }
                
                &.card-2 {
                    background-color: #f7ecfc;
                }

                &.card-3 {
                    background-color: #fbecf1;
                }
            }

            .card-footer {
                padding: 1.7rem 1rem;
            }
        }

        .aside {
            flex-grow: 4;
            background-color: #f9f8fd;
            min-width: 150px;
            max-width: 150px;
        }
    }

    .sidebar {
        flex-grow: 1;
                min-width: 300px;
                max-width: 300px;
            width: 100%;

        #logo {
            text-align: center;
            margin: 1rem 0 2rem 0;
        }

        nav {
            font-size: 1.12rem;
            gap: 1rem;

            .nav-link {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 1.5rem;

                color: #c6d3fa; // #adacd8;
                font-weight: 800;
                border-left: 6px solid transparent;

                &:hover {
                    color: #e4cda4;
                }

                &.active {
                    border-color: #fdf2d8;
                    color: #fdf2d8;
                }

                &.disabled {
                    color: #6b8aca;
                }
            }
        }
    }
}

我的目标是使该模板以以下方式响应：徽标、徽标下的内容、内容下侧边栏的其余部分。问题是我必须在移动布局中“拆分”侧边栏才能完成此操作，但我不知道该怎么做。

我该如何实现这一点？

Answer 1

您可以通过使用网格来实现您的目标。

首先，您需要将

display: grid

设置为

.root-wrapper

并使用媒体查询根据分辨率更改

grid-template-areas

样式。 您还需要将

grid-area

设置为

.logo

、

.nav

、

.content

元素。

您可以在我的CodePen上查看运行结果。

为了您的方便，我还附上了代码。

HTML

<div class="root-wrapper">
  <div id="logo">
    <img
      src="https://www.logodesign.net/logo/line-art-house-roof-and-buildings-4485ld.png?size=2"
      width="250"
    />
  </div>

  <nav class="nav flex-column">
    <a class="nav-link" href="#"> Dashboard </a>
  </nav>
  <div class="content d-block d-xxl-flex">
    <div class="main">Content</div>

    <div class="aside d-none d-xxl-block"></div>
  </div>
</div>

SCSS

    body {
  background: linear-gradient(75deg, #e2ceff 0%, #e9eaff 100%);
}

.root-wrapper {
  margin: 3% 5%;
  padding: 10px;
  background-color: #5955b3;
  border-radius: 3rem;

  display: grid;
  grid-template-areas: "logo" "content" "nav";

  @media only screen and (min-width: 600px) {
    grid-template-areas:
      "logo content"
      "nav content";
    grid-template-rows: auto 1fr;
    grid-template-columns: 300px 1fr;
    padding-left: 0px;
  }

  .content {
    grid-area: content;
    border-radius: 2.8rem;
    background-color: #fff;
    flex-grow: 7;

    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 800px;

    .main {
      flex-grow: 6;
      padding: 2.7rem 2rem;
      // font-size: 1.25rem;

      .page-description {
        padding: 1rem 0;
      }

      .card {
        h2 {
          color: #303030;
          font-weight: 800;
        }

        &.card-1 {
          background-color: #f4f4fe;
        }

        &.card-2 {
          background-color: #f7ecfc;
        }

        &.card-3 {
          background-color: #fbecf1;
        }
      }

      .card-footer {
        padding: 1.7rem 1rem;
      }
    }

    .aside {
      flex-grow: 4;
      background-color: #f9f8fd;
      min-width: 150px;
      max-width: 150px;
    }
  }

  #logo {
    grid-area: logo;
    text-align: center;
    margin: 1rem 0 2rem 0;
  }

  nav {
    grid-area: nav;
    font-size: 1.12rem;
    gap: 1rem;

    .nav-link {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 1.5rem;

      color: #c6d3fa; // #adacd8;
      font-weight: 800;
      border-left: 6px solid transparent;

      &:hover {
        color: #e4cda4;
      }

      &.active {
        border-color: #fdf2d8;
        color: #fdf2d8;
      }

      &.disabled {
        color: #6b8aca;
      }
    }
  }
}