CSS导航栏宽度响应式@media查询不生效问题咨询

问题原因 #

你使用flex布局作为导航栏的容器，但仅给flex子项（.nav-logo、.nav-links）设置了width属性，而flex布局中子元素默认flex-shrink: 1，空间不足时会自动收缩宽度，导致你在媒体查询中设置的30%/70%宽度被压缩失效。同时移动端.nav-links保留了padding-left: 3rem的设置，小屏幕下3rem的内边距会挤占大量可用空间，进一步打乱布局比例。

修复方案 #

修改你的媒体查询代码，用flex简写属性强制固定子项占比，同时调整小屏幕下的内边距和内部列表宽度即可，修改后的代码如下：

@media all and (max-width:500px) {
  nav {
    position: fixed;
    display: flex;
    height: 4rem;
    background-color: red;
    font-size: .6rem;
  }
  .nav-logo {
    font-weight: bold;
    align-items: center;
    padding-left: 1rem;
    display: flex;
    /* 强制固定占比：不放大、不缩小、占30%宽度 */
    flex: 0 0 30%;
    height: 100%;
    font-family: 'Rock Salt', cursive;
    background-color: yellow;
  }
  .nav-links {
    display: inline-flex;
    /* 强制固定占比：不放大、不缩小、占70%宽度 */
    flex: 0 0 70%;
    background-color: teal;
    height: 100%;
    /* 调小内边距适配小屏幕 */
    padding-left: 0.5rem;
  }
  /* 让内部列表占满导航链接容器 */
  .nav-links ul {
    width: 100%;
  }
}

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