移动端优先页面媒体查询中max-width与display:grid不生效求助

安全阿岳

2026-6-20

问题解决思路

你的大屏样式不生效的核心原因是CSS选择器优先级冲突：

原样式中.heading和.cards-container是嵌套在main选择器下定义的（即main .heading、main .cards-container），权重高于媒体查询中单独的.heading、.cards-container选择器。
媒体查询不会提升选择器权重，所以大屏下的样式被移动端样式覆盖了。

修复步骤

1. 修正媒体查询的选择器层级

将媒体查询里的选择器调整为和原样式一致的嵌套结构，确保权重匹配：

@media (min-width: 768px) {
    main .heading {
        max-width: 540px;
    }
    main .cards-container {
        display: grid;
        grid-template-rows: repeat(6, 1fr);
        // 可选：补充网格列定义，适配大屏布局
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

2. 适配卡片的网格布局（可选）

如果要实现常见的上下居中、左右卡片对齐的经典布局，还需要调整卡片的网格区域和宽度限制：

@media (min-width: 768px) {
    main .cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2.5rem;
        align-items: center;
    }

    main .cards-container .card {
        max-width: unset; // 取消移动端宽度限制，让卡片适配网格列宽
    }

    .light-blue {
        grid-row: span 2;
        grid-column: 1;
    }
    .red {
        grid-column: 2;
        grid-row: 1;
    }
    .yellow {
        grid-column: 2;
        grid-row: 2;
    }
    .blue {
        grid-row: span 2;
        grid-column: 3;
    }
}