如何用HTML/CSS还原Figma卡片设计？布局与响应式问题求助

我正在尝试将Figma中的一款卡片设计用HTML/CSS还原，但在排版布局和响应式适配方面遇到了问题。以下是我的HTML、CSS代码：

HTML代码 #

<div class="cards-container">
    <div class="box1_1">
        <div class="box1_3">
            <p>CAREY</p>
            <h1>1</h1>
        </div>
        <div class="box1_2">
            <p>On 56 Points</p>
        </div>
    </div>
    <div class="box1_1">
        <div class="box1_3">
            <p>CAREY</p>
            <h1>1</h1>
        </div>
        <div class="box1_2">
            <p>On 56 Points</p>
        </div>
    </div>
    <div class="right-cards-container">
        <div class="box1_1">
            <div class="box1_3">
                <p>CAREY</p>
                <h1>1</h1>
            </div>
            <div class="box1_2">
                <p>On 56 Points</p>
            </div>
        </div>
        <div class="box1_1">
            <div class="box1_3">
                <p>CAREY</p>
                <h1>1</h1>
            </div>
            <div class="box1_2">
                <p>On 56 Points</p>
            </div>
        </div>
    </div>
</div>

CSS代码 #

.box1_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 262px;
    height: 276px;
    background: gray;
    opacity: 1;
    border-radius: 44px;
    box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09);
    overflow: hidden;
    position: relative;
}

.box1_3 {
    padding-top: 20%;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: white;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 10;
}

.box1_2 {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: #f6df6f;
    height: 35%;
    width: 100%;
    position: absolute;
    bottom: 0%;
    box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09);
}

.box1_3 h1 {
    font-size: 72px;
    margin-top: -10px;
}

.box1_2 p {
    font-size: 18px;
}

.cards-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
}

.right-cards-container {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: flex-end;
    align-self: flex-end;
}

.right-cards-container .box1_1 {
    width: 205px;
    height: 215px;
}

解决方案 #

1. 重构布局结构 #

原布局会让所有卡片垂直排列，要实现左右分栏的效果，需将前两个卡片放入左侧容器，与右侧容器并列：

<div class="cards-container">
    <div class="left-cards-container">
        <div class="box1_1">...</div>
        <div class="box1_1">...</div>
    </div>
    <div class="right-cards-container">
        <div class="box1_1">...</div>
        <div class="box1_1">...</div>
    </div>
</div>

对应CSS修改：

.cards-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin: 50px;
    flex-wrap: wrap; /* 开启换行适配小屏幕 */
}

.left-cards-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

2. 修复卡片内部样式问题 #

• 修正box1_3的top属性缺失单位的问题，改用flex布局实现内容居中
• 移除box1_2的重复阴影，统一由父卡片控制

.box1_3 {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: white;
    height: 65%; /* 与box1_2的35%高度匹配 */
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.box1_2 {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: #f6df6f;
    height: 35%;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0 20px;
}

3. 实现响应式适配 #

通过媒体查询，在不同屏幕尺寸下调整布局：

@media (max-width: 900px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .left-cards-container, .right-cards-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box1_1, .right-cards-container .box1_1 {
        width: calc(50% - 25px);
        aspect-ratio: 262/276; /* 用宽高比替代固定高度，保持卡片比例 */
        height: auto;
    }

    .box1_3 h1 {
        font-size: clamp(40px, 10vw, 72px); /* 动态字体大小 */
    }
}

@media (max-width: 500px) {
    .box1_1, .right-cards-container .box1_1 {
        width: 100%; /* 小屏幕下单列显示 */
    }
}

4. 优化卡片比例控制 #

用aspect-ratio替代固定高度，确保卡片缩放时比例不变：

.box1_1 {
    width: 262px;
    aspect-ratio: 262/276;
    /* 其他样式保留 */
}

.right-cards-container .box1_1 {
    width: 205px;
    aspect-ratio: 205/215;
}

内容的提问来源于stack exchange，提问作者Pav