Question

我在页面底部制作了一块社交媒体图标。

我想将它们缩小到小于375像素的屏幕，但我的媒体查询不起作用。

这是我的一些CSS：

@media (max-width: 275px) {
.custom-social-icon
    padding:5px 7px;
}

.fa-facebook {
padding:10px 14px;
transition: .5s;
background-color: lightsteelblue;
}

我的HTML：

<div class="footer-social-icons">
<ul class="social-icons">
    <li><a href="#" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li>

当我将屏幕大小调整为小于断点时，图标保持相同的大小。我究竟做错了什么？谢谢你的帮助！

Answer 1

使用此代码，它可能对您有所帮助。在这里你改变css，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
      @media (max-width: 375px) {
      .fa-facebook{
         padding:5px 7px !important;
            }
      }
    .fa-facebook {
      padding:10px 14px;
      transition: .5s;
      background-color: lightsteelblue;
    }
    </style>
  </head>
  <body>
    <div class="footer-social-icons">
      <ul class="social-icons">
        <li><a href="#" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li>
      </ul>
    </div>
  </body>
</html>

Answer 2

您在媒体查询“{}”

中缺少一些大括号

@media (max-width: 275px) {
 .custom-social-icon{
   padding:5px 7px;
   }
  .fa-facebook {
    padding:10px 14px;
    transition: .5s;
    background-color: lightsteelblue;
   }
 }

Answer 3

它只是代码中的一个简单错误。用这个替换你的媒体查询，它将完美地运作。

@media (max-width: 275px) {
 .custom-social-icon {
  padding:5px 7px;
 }

 .fa-facebook {
  padding:10px 14px;
  transition: .5s;
  background-color: lightsteelblue;
 }
}

如何使用媒体查询在某些断点处调整li元素的大小？

3 个答案: