html - 在 CSS3/Susy 中禁用 "display: none;"

Question

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

我的公司采用移动设备优先的方法，这意味着首先设计最小的断点，所有其他断点都基于第一个断点。

因为我需要在最小的断点处隐藏按钮，所以我在上面使用了display: none，但是我找不到在较大的断点处再次显示按钮的方法。

现在我的问题是，我能否以任何方式摆脱“显示:无”，或者是否有任何其他方式可以隐藏和显示内容？

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

此外，仅将“显示”属性设置为另一个值对我来说不起作用，即使使用 !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>