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

Question

我在无序列表中的特定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 更改即可实现桌面和移动视图使用媒体查询的结果？

我尝试过的事情（使用 w/o 改变当前的 HTML 结构），

CSS3格
CSS3 弹性框
CSS3 多列布局

但不得不给 -ve 边距或定位，但解决方案不可扩展，因为标题可能占用超过 1 行，内容的长度可能会发生变化。即使我采用 mobile-first 方法，也必须实现相同的目标！

Answer 1

我不确定这是否适合你，因为这个不符合你的 html 结构（不是重大变化，只是删除了一个 div 标签。）

而且，作为 p 标签和 h2 标签的父级的 div 根据您的 CSS 没有发挥任何重要作用提供。

所以我删除了 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>

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

你也可以参考这个代码笔link：https://codepen.io/prathameshkoshti/pen/KKMrOBG?editors=1100

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

How to handle RWD without disturbing the suggested structure

html

css

layout

flexbox

css-grid