如何隐藏特定断点上的单元格？答案

【问题标题】：How can I hide a cell on a specific breakpoint?如何隐藏特定断点上的单元格？
【发布时间】：2021-06-17 16:37:42
【问题描述】：

我有以下基本布局，现在我想使用纯 css 将其转换为响应式网格。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... --> 
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">Navigation</div>

        <div class="pure-u-5-24">left space</div>

        <div class="pure-u-11-24">content</div>
        <div class="pure-u-3-24">ToC</div>

        <div class="pure-u-5-24">right space</div>

        <div class="pure-u-1">Footer</div>
    </div>
</body>
</html>

不幸的是，我不知道如何隐藏，例如<div class="pure-u-3-24">ToC</div> 在特定断点上。

我查看了基本文件pure.css 以及包含网格grids-responsive.css 的类的css。 Bootstrap 中似乎没有 .hidden-*-down 类这样的东西。我也找不到任何（purecss-）实用程序来完成此操作。

如何使用 PureCSS 实现我的目标并在特定断点上隐藏元素？

【问题讨论】：

标签： html css responsive-design pure-css

【解决方案1】：

您可以使用media queries。 ToC 将隐藏在 728px 之下。

@media screen and (max-width:728px){
  .pure-u-3-24 {
    display:none;
  }
}

<div class="pure-g">
  <div class="pure-u-1">Navigation</div>

  <div class="pure-u-5-24">left space</div>

  <div class="pure-u-11-24">content</div>
  <div class="pure-u-3-24">ToC</div>

  <div class="pure-u-5-24">right space</div>

  <div class="pure-u-1">Footer</div>
</div>

【讨论】：

【解决方案2】：

首先，您可以将此 css 添加到您的 css 文件中：

/* pure-hidden-md *
@media screen and (max-width:48em) {
.pure-hidden-md {display:none}

}

现在将“pure-hidden-md”类添加到任何地方：

<div class="pure-u-3-24 pure-hidden-md">ToC</div>

【讨论】：