CSS网格媒体查询答案

【问题标题】：css grid media queryCSS网格媒体查询
【发布时间】：2019-04-16 19:59:50
【问题描述】：

首先不是我的代码，遵循教程人员，但媒体查询有问题。使用 Chrome 浏览器

大屏css，效果很好

/* Navigation */
.main-nav ul {
    display: grid;
    grid-gap: 20px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(4, 1fr);
}

医疗查询

/* Media Queries */
@media (max-width: 700px) {
    .top-container {
        grid-template-areas: 
            'showcase showcase'
            'top-box-a top-box-b';
    }

    .showcase h1 {
        font-size: 2.5rem;
    }

    .main-nav ul {
        grid-template-columns: 1fr;
    }
}

除了 main-nav 仍然水平显示四个 ul 项目，而不是水平显示单个选项之外，媒体查询有效。

【问题讨论】：

Flex grid not resizing for @media queries的可能重复

标签： css media-queries css-grid

【解决方案1】：

按照我理解您的问题，您的代码目前的运行方式似乎一切正常。我创建了一个 JSFiddle 来重新创建您正在处理的内容。您能否修改它并向我们展示您与该问题相关的代码？

在没有看到您的 DOM 的情况下，我唯一的另一个建议是尝试使用 grid-template-rows，以准确告诉它必须填充多少行（尽管您不应该需要这个）：

@media (max-width: 700px){
    .main-nav ul {
        grid-template-columns: repeat(4, auto);
    }
}

http://jsfiddle.net/fqx7hayb/11/

【讨论】：