Question

首先不是我的代码，而是跟随本教程的人，但是媒体查询有问题。使用Chrome浏览器

大屏幕CSS，效果很好

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

Mediq查询

/* 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项目，而不是水平显示单个选项。

Answer 1

根据我目前对您的问题的了解，您代码的当前放置方式似乎一直在起作用。我创建了一个JSFiddle来重新创建您正在处理的内容。您可以修改它并向我们显示有关该问题的代码吗？

我唯一没有看到您的DOM的建议就是也尝试使用grid-template-rows，以准确告知它必须填充多少行（尽管您不需要）：

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

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

CSS网格媒体查询

1 个答案: