Question

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

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

这是我的尝试：

联系页面：

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

仅当视图是响应移动大小时才显示按钮

2 个答案: