Flexbox：如何使用正确的宽度和高度在列中排列响应式菜单项？

Question

我正在尝试使网站响应式，我想要包含的第一件事是导航菜单，但是，由于我是媒体查询方面的新手，所以我遇到了一些困难。 第一个问题是菜单不响应

display: column;

。 其次，我很难使用宽度和高度。

我提供了一个我一直在尝试对导航菜单执行的操作的示例：

@media (max-width:576px) {
    .nav-bar {
     flex-direction: column;
     padding: 3px;
     width: 200%;
     height: 500%;
     margin-top: 30px;
    }

任何帮助都会有帮助并让我前进，非常感谢。

Answer 1

您可以使用 CSS 媒体查询来调整不同屏幕尺寸的布局和样式

/* Base Styles */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
}

.nav-menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 10px;
}

.nav-item a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
}

.nav-item a:hover {
  background-color: #555;
}

/* Responsive Styles */
@media (max-width: 576px) {
  .nav-bar {
    flex-direction: column;
    align-items: flex-start; 
  }

  .nav-menu {
    flex-direction: column; 
    width: 100%; 
  }

  .nav-item {
    margin: 5px 0; 
  }

  .nav-item a {
    display: block; 
    width: 100%; 
    padding: 12px 16px; 
  }
}