代码之家 › 专栏 › 技术社区 › i.maddy

在移动视图中隐藏html按钮

media-queries responsive-design twitter-bootstrap css html

i.maddy · 技术社区 · 8 年前

JSFIDLE代码:

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

<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;
}

5 回复 | 直到 8 年前

Kurohige 8 年前

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

caramba 8 年前

只需使用以下内容:

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

根据需要隐藏按钮的宽度

此处更新了fiddle: https://jsfiddle.net/cgqme8xo/2/

kyun 8 年前

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

使用如何 @media screen

blendenzo 8 年前

由于您使用的是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 查看可用选项。

James Douglas 6 年前

@media 查询

第一步是放置视口 <meta> 中的标记 <head> 您的HTML:

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

然后使用从CSS查询:

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

你可以改变 max-width: 768px

尝试调整浏览器的大小,看看它是否工作。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前