仅当视图响应移动尺寸时才显示按钮答案

【问题标题】：Show button only when view is responsive mobile size仅当视图响应移动尺寸时才显示按钮
【发布时间】：2017-05-13 20:54:14
【问题描述】：

我想在我的网页上添加一个呼叫支持按钮，该按钮具有响应式设计。我只想在网页处于移动视图时显示按钮，并在不是移动视图时将其替换为一行文本。

我在显示/隐藏响应式网页的按钮时遇到问题。

这是我的尝试：

联系页面：

<div>
     <p class ="Call-Customer-Support">Call customer support at 555-555-5555.   </p>
     <div class="Rectangle">
     <img class="call icon-image" src="images/call.png" />
     <a class="Call-Support" href="tel:555-555-5555">Call Support</a>
     </div>
</div>

在我的 style.css 中：

 .Call-Customer-Support {
      width: 709px;
      height: 18px;
      font-family: BentonSans-Bold;
      font-size: 16px;
      font-style: normal;
      font-stretch: normal;
      color: #ffffff;
      margin: 50px auto;
    }

    .Rectangle {
      width: 292px;
      height: 57px;
      border-radius: 8px;
      background-color: #0e74af;
      margin: 50px auto;
    }

    .call {
      width: 24px;
      height: 24px;
      object-fit: contain;
      margin-left:72px; 
      margin-top:16px;
      vertical-align:middle; 
      float: left;
    }

    .Call-Support {
      width: 116px;
      height: 23px;
      font-family: BentonSans-Regular;
      font-size: 20px;
      font-style: normal;
      font-stretch: normal;
      color: #ffffff;
      margin-left: 8px;
      vertical-align:middle; 
      text-decoration: none;
      float:left;
      display:block;
      margin-top:17px;
    }

在我的 responsive.css 中：

@media only screen and (max-width: 767px) {

        .Rectangle {
          width: 292px;
          height: 57px;
          border-radius: 8px;
          background-color: #0e74af;
          margin: 50px auto;
        }

        .call {
          width: 24px;
          height: 24px;
          object-fit: contain;
          margin-left:72px; 
          margin-top:16px;
          vertical-align:middle; 
          float: left;
        }

        .Call-Support {
          width: 116px;
          height: 23px;
          font-family: BentonSans-Regular;
          font-size: 20px;
          font-style: normal;
          font-stretch: normal;
          color: #ffffff;
          margin-left: 8px;
          vertical-align:middle; 
          text-decoration: none;
          float:left;
          display:block;
          margin-top:17px;
        }
}



@media only screen and (max-width: 479px) {


        .Rectangle {
          width: 292px;
          height: 57px;
          border-radius: 8px;
          background-color: #0e74af;
          margin: 50px auto;
        }

        .call {
          width: 24px;
          height: 24px;
          object-fit: contain;
          margin-left:72px; 
          margin-top:16px;
          vertical-align:middle; 
          float: left;
        }

        .Call-Support {
          width: 116px;
          height: 23px;
          font-family: BentonSans-Regular;
          font-size: 20px;
          font-style: normal;
          font-stretch: normal;
          color: #ffffff;
          margin-left: 8px;
          vertical-align:middle; 
          text-decoration: none;
          float:left;
          display:block;
          margin-top:17px;
        }

}

对于所有其他尺寸，我设置了以下属性：

  .Rectangle {visibility:hidden}
  .call {visibility:hidden}
  .Call-Support{visibility:hidden}

但是，它对显示的项目的可见性没有影响...

【问题讨论】：

你可以免费使用 bootstrap 吗？
我认为您需要在响应式 CSS 中明确设置可见性为 visible。否则它将仅继承 hidden..（visibility:hidden 将隐藏该元素，但它' 仍会占用元素的物理空间，display:none 将隐藏而不渲染元素）。

标签： html css responsive

【解决方案1】：

在这里我添加了您尝试实现的基本实现

.call-support {
  display: inline-block;
  padding: 5px 10px;
  background: #aaa;
  color: white;
  font-family: Arial;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
}
.support {
  text-align: center;
}
.show-large {
  display: none;
}
@media only screen and (min-width: 767px) {
  .show-large {
    display: block;
  }
  .show-mobile {
    display: none;
  }
}

<div class='support'>
  <a class="call-support show-mobile" href="tel:555-555-5555">Call Support</a>
  <span class='show-large'>Call customer support at 555-555-5555.</span>
</div>

【讨论】：

请查看结果为运行代码 sn -p > 整页

【解决方案2】：

visibility 不足以隐藏元素。您需要指定display:none; 才能真正隐藏它。

在您的示例中，您可以在响应文件中将按钮的display 属性更改为block，将文本更改为display:none。在主 css 文件中，您需要执行完全相反的操作。

您还可以删除文件之间的所有重复代码，因为我认为它们都包含在站点中（例如width、height 等）。

因此可以将响应文件还原为以下代码：

@media only screen and (max-width: 767px) {
   .Rectangle {
      display:block;
   }
   .Call-Customer-Support {
      display:none;
   }
}

【讨论】：