CSS / 在手机上隐藏按钮

Question

我正在使用以下 CSS 显示社交分享按钮：

#social_side_links {
    position: fixed;
  top: 40%;
  right: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}
#social_side_links li a {display: block;}
#social_side_links li a img {
    display: block;
    max-width:25px;
  padding: 10px;
  -webkit-transition:  background .2s ease-in-out;
  -moz-transition:  background .2s ease-in-out;
  -o-transition:  background .2s ease-in-out;
  transition:  background .2s ease-in-out;
}
#social_side_links li a:hover img {background: rgba(0, 0, 0, .2);}

但是，我想在移动设备（而非平板电脑）中隐藏它。使这项工作的方法是什么？

Answer 1

您可以使用媒体查询来隐藏响应式元素。

在您的情况下，您可以使用：

@media screen and (max-width:768px){
#social_side_links {
    display:none;
}

这将在移动设备上隐藏您的元素（根据需要更改最大宽度）。

Answer 2

Media queries 是解决方案。允许您为特定分辨率、屏幕格式等指定样式。

狐狸例子：

#social_side_links
    display: none

@media (min-width: 768px) {
    #social_side_links {
        display: inline-block;
    }
}

如果您必须支持移动设备并且它们也是一个优先事项，我建议遵循移动优先的方法，就像示例一样。

Answer 3

定位移动设备的典型方法是使用 @media 查询：

@media (max-width: 480px) {
  #social_side_links {
    display: none;
  }
}

您还可以使用 @media 查询根据其他更具体的信息应用 CSS，例如：

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    ...
}

@media 查询的官方当前文档：

CSS Conditional Rules Module Level 3。

有用的链接：

Using media queries (MDN)
Media queries（MDN）

如果以上内容还不够，并且您需要更准确的设备定位，您可能需要查看以下库之一：

CSS / 在手机上隐藏按钮

CSS / hide buttons on mobile

css

mobile

hide