如何实现卡片响应式布局：PC横向排列，移动端纵向排列

目前PC端卡片横向排列已正常，要实现小屏幕（≤600px）下卡片纵向堆叠，只需调整容器的flex布局方向，并优化部分样式适配小屏：

修改后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div class="card">
            <div class="card-image"></div>
            <div class="card-text">
                <span class="date">4 days ago</span>
                <h2>First Idea</h2>
                <p>
                    Lorem ipsum dolor sit demoise amet consectetur, Ducimusele,
                    repudiandae temporibus omnis illum maxime quod deserunt
                    eligendi dolor
                </p>
                <div class="price">€100</div>
            </div>
        </div>
        <div class="card rgb">
            <div class="card-image card2"></div>
            <div class="card-text card2">
                <span class="date">1 week ago</span>
                <h2>Second Idea</h2>
                <p>
                    Adipisicing elit. Ducimus, repudiandae corrupti tialeno des
                    ameto temporibus omnis provident illum maxime quod. Lorem
                    ipsum dolor
                </p>
                <div class="price">€100</div>
            </div>
        </div>
        <div class="card">
            <div class="card-image card3"></div>
            <div class="card-text card3">
                <span class="date">3 week ago</span>
                <h2>N Idea</h2>
                <p>
                    Repudiandae repudiandae de corrupti amet temporibus omnis si
                    provident illum maxime. Ducimus, lorem ipsum dolor
                    adipisicing elit
                </p>
                <div class="price">€100</div>
            </div>
        </div>
    </body>
</html>

CSS 代码

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/images/mainpage.jpg");
    background-size: cover;
    overflow: auto;
    box-sizing: border-box;
}

.card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 250px 20px;
    grid-template-areas: "image" "text" "stats";
    border-radius: 18px;
    background: #1d1d1d;
    color: white;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
    font-family: roboto;
    text-align: justify;
    cursor: pointer;
    margin: 30px;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
.rgb::after {
    content: "";
    background: linear-gradient(
            45deg,
            #ff0000 0%,
            #ff9a00 10%,
            #d0de21 20%,
            #4fdc4a 30%,
            #3fdad8 40%,
            #2fc9e2 50%,
            #1c7fee 60%,
            #5f15f2 70%,
            #ba0cf8 80%,
            #fb07d9 90%,
            #ff0000 100%
        )
        repeat 0% 0% / 300% 100%;
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    filter: blur(8px);
    transform: translateZ(-1px); /*or z-index */
    animation: rgb 6s linear infinite;
}
@keyframes rgb {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.js-tilt-glare {
    border-radius: 18px;
}
.card-image {
    grid-area: image;
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img1.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}

.card-text {
    grid-area: text;
    margin: 25px;
    transform: translateZ(30px);
}
.card-text .date {
    color: rgb(255, 7, 110);
    font-size: 13px;
}
.card-text p {
    color: grey;
    font-size: 14px;
    font-weight: 300;
}
.card-text h2 {
    margin-top: 0px;
    font-size: 28px;
}
.card-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
}
.card-stats .stat {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}
.card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
}
.card-stats .value {
    font-size: 22px;
    font-weight: 500;
}
.card-stats .value sup {
    font-size: 12px;
}
.card-stats .type {
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
}

/*card2*/
.card-image.card2 {
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img2.jpg");
    background-size: cover;
}
.card-text.card2 .date {
    color: rgb(255, 77, 7);
}
.card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
}
.card-stats.card2 {
    background: rgb(255, 77, 7);
}
/*card3*/
.card-image.card3 {
    background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),
        url("/images/img3.jpg");
    background-size: cover;
}
.card-text.card3 .date {
    color: rgb(0, 189, 63);
}
.card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
}
.card-stats.card3 {
    background: rgb(0, 189, 63);
}

.price {
    font-size: 20px;
    color: white;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    body {
        flex-direction: column;
        min-height: auto;
        padding: 20px 0;
    }
    .card {
        grid-template-columns: minmax(280px, 300px);
        margin: 15px;
    }
}

关键修改点 #

• 添加移动端视口元标签，确保浏览器正确识别屏幕宽度
• 调整body的高度属性，小屏幕下允许内容自然延伸，避免截断
• 媒体查询中设置body的flex方向为column，实现卡片纵向排列
• 优化小屏幕下卡片的宽度，适配不同尺寸的移动设备
• 给body添加盒模型属性，避免padding影响整体宽度计算

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