手机上的CSS /隐藏按钮

Question

我正在使用Fowlling 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

媒体查询是解决方案。允许您为特定的分辨率，屏幕格式等指定样式

福克斯示例：

#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条件规则模块3级。

有用的链接：

• 使用媒体查询（MDN）
• 媒体查询（MDN）

---

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

• 移动设备项目
• ismobile