Question

当屏幕变小时，我尝试使用媒体查询隐藏社交媒体图标栏。我使用了下面显示的媒体，这似乎不起作用。如果有帮助，我使用bootstrap构建我的网站。

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



.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}


.content {
  margin-left: 75px;
  font-size: 30px;
}

 HTML CODE 



    <div class="icon-bar">
          <a href="https://facebook.com/spartansafety" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a>
          <a href="https://twitter.com/spartansafety01?lang=en" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
          <a href="https://www.instagram.com/spartansafety/" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
          <a href="https://www.linkedin.com/in/spartan-safety-limted-78a585156/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
        </div>

Answer 1

如果您使用的是bootstrap 4，则无需使用自定义媒体查询，请使用bootstrap 4类

d-md-inline d-sm-none d-none仅在中型和大型屏幕上显示

<div class="icon-bar">
      <a href="https://facebook.com/spartansafety" target="_blank" class="facebook d-md-inline d-sm-none d-none"><i class="fa fa-facebook"></i></a>
      <a href="https://twitter.com/spartansafety01?lang=en" target="_blank" class="twitter d-md-inline d-sm-none d-none"><i class="fa fa-twitter"></i></a>
      <a href="https://www.instagram.com/spartansafety/" target="_blank" class="instagram d-md-inline d-sm-none d-none"><i class="fa fa-instagram"></i></a>
      <a href="https://www.linkedin.com/in/spartan-safety-limted-78a585156/" target="_blank" class="linkedin d-md-inline d-sm-none d-none">

您可以在此处阅读更多内容：http://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Answer 2

尝试将所有媒体查询放在代码文件的底部，按最小值位于底部的大小

使用媒体查询隐藏元素

2 个答案: