仅当视图响应时才显示按钮手机大小

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>

哪些基本实现

Answer 2

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

在您的示例中，您可以将该按钮的display属性更改为响应文件中的block，将文本更改为display:none。在主要的css文件中，你需要做的恰恰相反。

此外，您还可以删除文件之间的所有重复代码，因为我按这两个文件都包含在网站中（例如width，height等）。

所以响应文件可以recuced这个代码：

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