Question

我有一个div，它是一个css网格容器。当页面宽度低于特定大小时，我希望网格的所有元素都放在一行上。我认为您应该能够将显示类型更改为弹性框，我尝试这样做并且网格保持不变。这是我正在使用的代码：

在NYjOmL上通过biltimi@gmail.com（@MeaningOf42）查看笔CodePen。

/* The important part of the CSS*/

@media (max-width: 40em) {
    .image {
        visibility:hidden;
    }

    .grid-container {
        display: inline-flex;
    }
}

/* The Styling of the container class: */
.grid-container {
    display: grid;
    width: 75%;
    margin: auto;
    padding: 10px;
    height: 100px;
    grid-template-columns: 16.6% 16.6% 33% 16% 16%;
    grid-template-rows: 2fr 3fr 3fr 1fr;
    grid-template-areas:
      ". . Image . ."
      "blog bikes Image about links"
      "shop events Image contact team"
      ". . Image . ."
}

对于上下文，我试图使用尽可能接近纯粹的vanilla HTML和CSS来复制聋人鸽子的网站（http://www.deafpigeon.co.uk）来练习布局页面。我希望我的div与聋人鸽子导航栏做同样的事情。

有没有人有解决方案？我可能会以错误的方式解决这个问题，如果是这样的话一定要让我知道。

Answer 1

正如Pete所说，您的媒体查询需要遵循您的基本规则，以便在满足条件时覆盖。首选方法是首先在媒体查询中声明您的移动样式，然后再声明桌面覆盖。

.grid-container {
    display: inline-flex;
}
@media all and (min-width: 40em) {
    .grid-container {
        display: grid;
    }
}

注意从max-width到min-width的更改，以确保在视口大于40em时启用此覆盖

Answer 2

只需将媒体查询声明移至文件末尾即可。您定义的媒体查询规则正在执行，但它会被后面的.grid-container规则覆盖。

CSS - 使用媒体查询将div的显示从网格更改为flexbox

2 个答案: