CSS Grid在移动设备上隐藏文本（移动优先）

Question

我正在构建一个导航栏并使用 CSS 网格。

这里是html：

<nav class="nav">
    <div class="menu">
        <div class="header">
            HEADER
        </div>
    </div>
    <span class="space"></span>
    <div class="breadcrumb">
        <div class="bcrumb">
            Breadcrumbs
        </div>
    </div>
</nav>
<div class="content">

</div>

这是我的 CSS：

body {
    font-family: sans-serif;
    margin:0;
}
.nav {
    height: 100px;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    display:grid;
    grid-template-rows: 1fr 5px 1fr;
    grid-template-areas: 
    "Menu"
    "Space"
    "Breadcrumb"
}
.content{
  height:1000px;
  background-color:gray;
  margin-top:100px;
}
.menu {
    grid-area: Menu;
    background-color: #333333;
    display: grid;
    grid-template-columns: 1.5em 80px 1fr auto;
    grid-template-areas: ". . . MenuItems";
}
.menu-items {
    grid-area: MenuItems;
}
.space {
    grid-area: Space;
    background-color: #c20418;
}
.breadcrumb {
    grid-area: Breadcrumb;
    background-color: white;
}
@media only screen and (min-width : 1224px) {
    .menu {
        display:inline-grid;
        grid-template-columns: 1.5em 80px auto 1fr auto auto;
        grid-template-areas: ". . Header . . MenuItems";
        align-content: end;
    }

    .header {
        grid-area: Header;
        color: white;
        font-size: 1.2em;
    }

    .breadcrumb {
        display: grid;
        grid-template-columns: 1.5em 80px 1fr;
        grid-template-areas: ". . Bcrumb";
    }

    .bcrumb {
        grid-area: Bcrumb;
        align-self: center;
        font-size: 1.2em;
    }
}

我已经为面包屑添加了标题文本和文本位置，只有在大屏幕上才应该出现。

我已经通过添加：

.header, .bcrumb{ 
    visibility:hidden;
}

然后将其设置为在媒体查询中可见。

但肯定有更好的方法来做到这一点？

这是一个Fiddle，代码相同。

Answer 1

这是移动屏幕的 CSS

@media all and (max-width: 767px) {
  .header, .bcrumb { 
    visibility: hidden;
  }
}