Question

我在教程的帮助下创建了这个小图标菜单，我正在尝试使其响应，但它无法正常工作。

当宽度为400px时，我希望菜单是垂直的。

body {
  margin: 0px;
}

.cuadro {
  width: 100%;
  background-color: pink;
  overflow: auto;
}

.cuadro a {
  float: left;
  text-align: center;
  width: 20%;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.cuadro a:hover {
  background-color: green;
}

.active {
  background-color: purple !important;
}

@media only screen and (max-width: 414px) {
  body {
    margin: 0px;
  }
  .cuadro {
    position: fixed;
    width: 414px;
    text-align: center;
    color: white;
    font-size: 36px
  }
  .cuadro a {
    background-color: pink;
    display: block;
    padding: 16px;
    color: white;
  }
  .cuadro a:hover {
    transition: all 0.3s ease;
    background-color: green;
  }
  .active {
    background-color: purple !important;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta content="viewport" content="width=device-width initial-scale=1">
  <script src="https://use.fontawesome.com/ea180863a6.js"></script>
</head>

<body>
  <div class="cuadro">
    <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a>
  </div>
</body>

</html>

我做错了什么？

Answer 1

你几乎不错，只需在媒体查询中设置菜单项float:none和width:100%即可。您还可以添加box-sizing:border-box以避免出现溢出问题，并且您无需在媒体查询中指定.cuadro的宽度：

body {
  margin: 0px;
}

.cuadro {
  width: 100%;
  background-color: pink;
  overflow: auto;
}

.cuadro a {
  float: left;
  text-align: center;
  width: 20%;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
  box-sizing:border-box;
}

.cuadro a:hover {
  background-color: green;
}

.active {
  background-color: purple !important;
}

@media all and (max-width: 414px) {
  .cuadro {
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 36px
  }
  .cuadro a {
    background-color: pink;
    display: block;
    width:100%;
    padding: 16px;
    color: white;
    float:none;
  }
  .cuadro a:hover {
    transition: all 0.3s ease;
    background-color: green;
  }
}

<!DOCTYPE html>
<html>

<head>

  <title>Title</title>
  <meta charset="utf-8">
  <meta content="viewport" content="width=device-width initial-scale=1">
  <script src="https://use.fontawesome.com/ea180863a6.js"></script>
  <style>

  </style>
</head>

<body>

  <div class="cuadro">
    <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a>
  </div>

</body>

</html>

Answer 2

你的CSS中有很多重复。没有必要两次声明规则。

float的替代方法是使用flexbox。请注意，您只需要为较小的屏幕更改容器的方向。

Good introduction to flexbox

示例

我已删除/更改了一些样式..如果您有疑问，请与我联系。

body { margin: 0; } .cuadro { background-color: pink; display: flex; } .cuadro a { text-align: center; flex: 1 0 20%; transition: all 0.3s ease; color: white; font-size: 36px; padding: 12px 0; } .cuadro a:not(.active):hover { background-color: green; } .active { background-color: purple; } @media only screen and (max-width: 414px) { .cuadro { flex-direction: column; justify-content: center; } }

<script src="https://use.fontawesome.com/ea180863a6.js"></script> <div class="cuadro"> <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a> </div>

如何使此媒体查询工作以垂直查看菜单？

2 个答案: