在移动视图中隐藏 html 按钮答案

【问题标题】：Hide html button in mobile view在移动视图中隐藏 html 按钮
【发布时间】：2018-03-10 15:08:57
【问题描述】：

我的网页有一个按钮，可将用户带到页面的下一部分。我想在移动视图中隐藏该按钮，但我无法为它找出正确的 CSS。

JSFIDDLE 代码：

https://jsfiddle.net/cgqme8xo/1/#&togetherjs=qTV1soRSqs

HTML代码：

<section>
<a href="#main" class="scroll-down" address="true" class="text-right hidden-md"></a>
</section>

CSS：

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #EF4043;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}


.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid #EF4043;
    border-width: 0px 0 2px 2px;
}

【问题讨论】：

您正在使用引导程序。您不需要自定义 CSS。请参阅下面的答案。

标签： html css twitter-bootstrap responsive-design media-queries

【解决方案1】：

您正在寻找 CSS @media 查询。

第一步是在 HTML 的 <head> 中放置一个视口 <meta> 标签：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

然后您使用 CSS 中的 @media 查询：

@media only screen and (max-width: 768px) {
  .scroll-down {
    display: none;
  }
}

您可以将max-width: 768px 更改为您想要的任意数量的像素；基本上当屏幕宽度小于指定的amout时，就会使用query里面的CSS，优先级高于其他CSS。

尝试调整浏览器的大小，看看它是否有效。

【讨论】：

【解决方案2】：

在 Bootstrap 3 中，您可以像这样使用 bootstrap Responsive Utilities：

<section >
    <a href="#main" class="scroll-down text-right hidden-xs" address="true"></a>
</section>

在 Bootstap 4 Responsive Utilities 中：

<section >
    <a href="#main" class="scroll-down text-right hidden-xs-down" address="true"></a>
</section>

【讨论】：

是的，在 Bootstrap 4 中也可用...看看here

【解决方案3】：

由于您使用的是 Bootstrap，因此无需自定义 CSS 即可：

<section class="d-none d-md-block">
  <a href="#main" class="scroll-down" address="true" class="text-right"></a>
</section>

将d-md-block 更改为最适合您需要的任何断点和显示类型。有关可用选项，请参阅 the Bootstrap documentation。

【讨论】：

对于小于中断点的所有内容，它将显示“无”。因此，它将按照您的要求隐藏在移动设备上。不过，将显示类放在<section> 而不是<a> 上可能会更好。我会更新我的答案。
我想我误解了你想要什么。您是否希望按钮不可见，但仍保持功能？
我希望它只隐藏在移动视图中。我收到了答案，非常感谢您的帮助。我真的很感激。

【解决方案4】：

只需使用类似的东西：

@media (max-width: 600px) {
  .scroll-down {
    display: none;
  }
}

具有隐藏按钮所需的宽度

在此处更新小提琴：https://jsfiddle.net/cgqme8xo/2/ 只需调整可见区域的大小，然后您将看到它如何显示/隐藏按钮

【讨论】：

【解决方案5】：

@media screen and (max-width: 460px) {
  .scroll-down{
    display: none;
  }
}
@media screen and (min-width: 461px) {
  .scroll-down{
    display: block;
  }
}

使用@media screen 怎么样？

【讨论】：