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

Question

我有以下基本布局，现在我想使用纯 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 as well as the css containing the classes for the grid grids-responsive.css。从Bootstrap知道的.hidden-*-downclass好像没有。此外，我找不到任何（纯css-）实用程序来完成此操作。

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

Answer 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>

Answer 2

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

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

}

现在添加 class "pure-hidden-md" 到任何地方：

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

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

How can I hide a cell on a specific breakpoint?

html

css

responsive-design

pure-css