0

我有以下基本布局，现在我想使用纯 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 。.hidden-*-downBootstrap 中似乎没有类这样的东西。我也找不到任何（purecss-）实用程序来完成此操作。

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

4

2 回答 2

0

首先，您可以将此 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>
于 2021-06-17T08:37:42.327 回答
0

您可以使用媒体查询。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>

于 2019-10-28T21:11:57.967 回答