Question

所以我正在使用Susy2和Susy断点。现在我有一个问题，一个按钮应该显示在所有断点上，除了最小的一个。

我的公司采用移动优先的方法，这意味着最小的Breakpint首先设置样式，而所有其他断点均基于该第一个断点。

由于我需要将按钮隐藏在最小的断点上，因此我在其上使用了display: none，但是我找不到在较大的断点上再次显示按钮的方法。

现在我的问题是，我可以通过任何方式摆脱“显示：无”，还是可以通过其他方式隐藏和显示内容？

我不能只使用'visibility：hidden'，因为其余元素需要向上移动并占用该空间。

此外，仅将'display'属性设置为另一个值对我不起作用，即使使用!important也是如此。

这是隐藏按钮的当前代码：
HTML：

<div>
  <a href="${item/link}" class="button">Weiterlesen</a>
</div>

和CSS：

.button{
  display: none;
}

对于需要再次启用它的部分：
CSS：

.button{
  display: block !important;
  border: 1px solid #67717D;
  border-radius: 3px;
  height: 40px;
  margin: auto 10px 20px 10px;
  text-align: center;
}

Answer 1

使用CSS @media Rule（您可以自己更改断点）

首先构建移动设备时，请始终将移动设备的样式（最小的屏幕）放在css文件的顶部。然后为大屏幕添加样式时使用min-width，这是构建移动优先应用程序的最佳方法。

.button{
  display: none;
  border: 1px solid #67717D;
  border-radius: 3px;
  height: 40px;
  margin: auto 10px 20px 10px;
  text-align: center;
}

@media screen and (min-width: 480px) {
    .button{
      display: block;
    }
}

<div>
  <a href="#" class="button">Weiterlesen</a>
</div>

Answer 2

使用media-query

在这里学习：https://www.w3schools.com/css/css3_mediaqueries_ex.asp \

对于示例（在小于600px的尺寸屏幕中，它将隐藏）：

@media screen and (min-width: 600px) {
     .button{
      display: block !important;
      border: 1px solid #67717D;
      border-radius: 3px;
      height: 40px;
      margin: auto 10px 20px 10px;
      text-align: center;
      }
    }
.button{
  display: none;
}

<div>
  <a href="${item/link}" class="button">Weiterlesen</a>
</div>

注意！

要使用media-query，必须将此meta放在head标记中：

<meta name="viewport" content="width=device-width, initial-scale=1">

禁用“显示：无；”在CSS3 / Susy中

2 个答案: