如何使用CSS媒体查询调整导航栏的宽度？

你当前的代码已经实现了基础的媒体查询适配：当视口宽度在289px到1100px之间时，.nav .lib元素的宽度会被设置为100px。如果要更灵活地实现增减宽度的效果，可以针对不同的屏幕断点设置不同的宽度值，以下是更实用的方案：

基础适配示例（桌面优先） #

/* 默认桌面端宽度（视口>1100px时生效） */
.nav .lib {
  width: 220px;
}

/* 平板端（768px-1100px）：缩小侧边栏宽度 */
@media (min-width: 768px) and (max-width: 1100px) {
  .nav .lib {
    width: 160px;
  }
}

/* 移动端（<768px）：进一步缩小或改为全屏 */
@media (max-width: 767px) {
  .nav .lib {
    width: 70px;
    /* 若需要移动端横向导航，可改为：width: 100%; */
  }
}

进阶技巧 #

• 断点尽量选用主流设备尺寸（如768px、1024px），非常规数值（如289px）仅在有特殊布局需求时使用。
• 若希望宽度随视口比例动态变化，可使用百分比或vw单位代替固定像素，比如width: 18vw;，这样侧边栏宽度会自动随视口缩放。
• 注意样式优先级：媒体查询内的样式会覆盖默认样式，确保默认样式是针对最大或最小视口的，避免样式冲突。

内容的提问来源于stack exchange，提问作者Kirti Kaushik