如何修改CSS实现移动端页面一行显示2张卡片

你当前的代码中给所有宽度小于991px的设备设置了.card的最小宽度为300px，普通移动端屏幕宽度大多在360px-430px区间，300px的固定最小宽度无法容纳两张卡片，所以只能单行展示1张，可通过以下方式修改：

修改你的响应式CSS代码，拆分不同设备断点，取消固定最小宽度限制，改用动态宽度计算：

/*** Responsive ***/
/* 平板端适配：768px ~ 991px，保持一行2张 */
@media(max-width: 991px) and (min-width: 768px)
{
    .wrapper{
        padding: 25px;
    }
    .wrapper h1{
        font-size: 2.5em;
        font-weight: 600;
    }
    .content-box{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    .card{
        width: calc(50% - 5px);
        min-width: unset;
        margin: 0 0 10px 0;
    }
}
/* 移动端适配：小于768px，实现一行2张 */
@media(max-width: 767px)
{
    .wrapper{
        padding: 15px;
    }
    .wrapper h1{
        font-size: 2em;
    }
    .content-box{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    .card{
        width: calc(50% - 5px);
        min-width: unset;
        margin: 0 0 10px 0;
    }
}

注意事项 #

• 若修改后出现卡片内容溢出，可配合调整卡片内部的字体大小、内边距，或者给文本内容添加text-overflow: ellipsis规则做溢出截断。
• 如果你不需要单独适配平板和移动端的其他样式，也可以不拆分断点，直接在原有媒体查询中给.content-box添加flex-wrap: wrap属性，同时把.card的min-width: 300px改为width: calc(50% - 10px)即可实现效果。

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