css屏幕变小菜单收缩

随着移动设备的普及，越来越多的网站需要适配不同的屏幕尺寸。一种常见的做法是在小屏幕上将导航菜单缩起来，占用更少的空间。这可以通过CSS实现。

/* 定义菜单样式 */
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

/* 定义菜单项样式 */
.menu-item {
  list-style: none;
  margin: 0 10px;
}

/* 定义菜单缩起来的样式 */
@media screen and (max-width: 500px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  .menu-button {
    display: block;
    font-size: 24px;
    color: #fff;
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .menu-list {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background-color: #333;
    padding: 10px;
  }
  .menu-item {
    margin: 10px 0;
  }
  .menu-button:focus+.menu-list,.menu-list:focus-within {
    display: block;
  }
}

上面的代码定义了一个菜单，包含若干菜单项，以及一个按钮用于缩起/展开菜单。在小屏幕上，菜单的方向变为垂直，菜单项变为块状元素，按钮放到菜单的右上角。点击按钮或者聚焦到菜单项时，菜单会展开。注意到菜单缩起来时，菜单列表需要设置为绝对定位，并且隐藏起来，与按钮和菜单容器（即.menu）处于同一级别。

这里只是简单地演示了一种用CSS实现屏幕变小菜单收缩的方法，实际上还有很多其他的实现方式。压缩图片、使用响应式字体、隐藏不必要的文字等都是提升移动设备用户体验的有效手段。