如何使用媒體查詢刪除我的網站元素

Question

我希望能夠刪除這個：

<div id="mail1">
  <li>
    <i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>
    <a href="mailto:support@mywebsite.com.au">support@mywebsite.com.au</a>
  </li>
</div>

當設備小於 600px 時。

Answer 1

我建議使用 class 而不是將屬性分配給 id。 這將幫助您將此 class 用於要隱藏在寬度小於 600 像素的屏幕上的多個組件。

 @media only screen and (max-width: 600px) {.desktop-only { display: none; } }

 <div id="mail1" class="desktop-only"><li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:support@mywebsite.com.au">support@mywebsite.com.au</a></li></div>

Answer 2

使用媒體查詢，然后使用顯示無。

@media only screen and (max-width: 600px) {
  #mail1 {
    display: none;
  }
}

Answer 3

我在這里看到大多數答案使用max-width: 600px但如果你真的想將它隱藏在600px 下，你應該像這樣使用599px ：

桌面優先 CSS

@media only screen and (max-width: 599px) {
  #mail1 {
    display: none;
  }
}

如果你想使用移動優先的 CSS，你可以這樣編碼：

移動優先 CSS

#mail1 {
  display: none;
}
@media only screen and (min-width: 600px) {
  #mail1 {
    display: block;
  }
}

Answer 4

也可以使用這個：

 @media only screen and (max-width:600px){ #mail1 { display: none; } }