Question

我的网站上有一个按钮，但我希望它只能在手机上使用。如何将其隐藏在桌面网站上？

<div class="pull-right">
     <button class="button-menu-mobile open-left">
       <i class="ion-navicon"></i>
     </button>
  <span class="clearfix"></span>
</div>

这是css

.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;

谢谢：）

Answer 1

我正在附加一个正常工作的代码段，如果你全屏显示，那么你将无法看到该按钮。

工作示例

＆＃13;

@media(min-width: 900px)
    {
    .button-menu-mobile
    {
    display:none;
    }
    }

＆＃13;

<div class="pull-right">
     <button class="button-menu-mobile open-left">
       <i class="ion-navicon"></i>
     </button>
  <span class="clearfix"></span>
</div>

＆＃13;

您需要为此目的使用媒体查询。根据您的需要设置最小宽度。

@media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}

Answer 2

代码：

＆＃13;

@media screen and (min-width: 600px) {
    .pull-right {
        visibility: hidden;
    }
}

＆＃13;

如何隐藏桌面上的按钮

2 个答案: