如何在不影响建议结构的情况下处理 RWD答案

【问题标题】：How to handle RWD without disturbing the suggested structure如何在不影响建议结构的情况下处理 RWD
【发布时间】：2021-02-23 07:51:54
【问题描述】：

我在无序列表中的特定 HTML 结构，

      <li key={index}>
        <img src={avatar} alt={title} />
        <div>
          <h2>
            <Trans>{title}</Trans>
          </h2>
          <p className="mb-0">
            <Trans>{desciption}</Trans>
          </p>
        </div>
      </li>

CSS：

li {
    width: 584px;
    padding: 40px 56px;
    border: 1px solid #707070;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #1a1a1a;
}
img {
     width: 104px;
     height: 104px;
     margin-right: 24px;
}
h2 {
    font-size: 24px;
}
p {
    font-size: 16px;
}

这给了我正确的预期输出（桌面视图），

但是现在，我想实现这个（移动端视图），

那么如何在不干扰结构的情况下实现上述的移动视图呢？或者如何构造它，以便只有 CSS 更改才能使用媒体查询同时实现桌面和移动视图的结果？

我尝试过的事情（改变和不改变当前的 HTML 结构），

CSS3 网格
CSS3 弹性框
CSS3 多列布局

但不得不给-ve margins OR 定位，但解决方案不可扩展，因为标题可能占据超过 1 行，内容的长度可能会改变。即使我采用移动优先的方法，也必须实现同样的目标！

【问题讨论】：

如果你在没有javascript的情况下这样做，那么它会变得“歪曲”和不完美，因为你的描述和标题是在一个单独的div中，相对于图片。虽然，如果你真的尝试，你可以在网格的帮助下做到这一点。
@sergeykuznetsov：我尝试使用网格，但 para 总是从第二行开始，即 image/h2 之后，然后必须给 -ve margin/transform 以将其向上移动。但同样，它不可扩展！
@sergeykuznetsov：你说得对，我只是将 span 2 值添加到 para，如果我也对图像也这样做，它工作正常，根据接受的答案。

标签： html css layout flexbox css-grid

【解决方案1】：

我不确定这是否适合您，因为它不遵循您的 html 结构（不是重大更改，只是删除了一个 div 标记。）

而且，根据您提供的 CSS，作为 p 标记和 h2 标记的父级的 div 不会发挥任何主要作用。

所以我删除了那个 div 并将 h2、p 和 img 标签作为网格的子元素。

我使用网格和媒体查询创建了这个布局。当您有max-width: 480px时，媒体查询启用移动视图

    body {
        display: grid;
        place-items: center;
        height: 100vh;
    }
    .header {
        font-weight: bold;
        font-size: 20px;
    }
    .grid {
        display: grid;
        width: 400px;
        grid-template-columns: 120px 1fr;
        grid-template-rows: 10px 100px;
        grid-gap: 10px 20px;
        align-items: center;
    }
    .image {
        grid-row: span 2;
    }

    @media screen and (max-width: 480px) {
        .grid {
            width: 200px;
            grid-template-columns: 60px 1fr;
            grid-template-rows: 60px 100px;
            grid-gap: 20px 10px;
        }
        .image {
            grid-row: span 1;
        }
        .description {
            grid-column: span 2;
        }
    }

    <div class="grid">
        <img class="image" src="https://miro.medium.com/max/1084/1*L8UwJymGdpTh-jSXhDZO6g.png" width="100%" />
        <h2 class="header">Amplify Growth</h2>
        <p class="description">We provide a system that allows you to easily engage your customer and business with our marketing and loyalty programmes. Setup once and our system will do the rest.</p>
    </div>

媒体查询覆盖了几乎所有的网格属性。但它给出了正确的解决方案。

你也可以参考这个codepen链接：https://codepen.io/prathameshkoshti/pen/KKMrOBG?editors=1100

【讨论】：