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

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

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

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