僅當視圖響應時才顯示按鈕手機大小

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