媒体查询（max-width）失效：屏幕缩小时无法调整Flex布局

我希望在屏幕尺寸缩小时调整Flex布局，但设置的媒体查询无法生效，不清楚具体原因。作为前端新手，我尝试查找相关资料，但因对media query系统了解不足，无法定位问题。

相关代码 #

CSS代码 #

*{
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
}
.layout {
    display: flex;
    flex-wrap: wrap;  
}
.nav {
    flex-basis: 100%;
    border-bottom: 1px solid #aaa;
    padding: 20px;
}
.sidebar {
    flex-basis: 20%;
    border-right: 1px solid #aaa;
    padding: 20px;
    border-bottom: 1px solid #aaa;
    }
.content {
    flex-basis: 80%;
    padding: 20px;
    border-bottom: 1px solid #aaa;
}

@media (max-with: 640px){
    .sidebar {
        flex-basis: 100%;
        border-right: 0;
    }
    .content {
        flex-basis: 100%;
    }
}

HTML头部配置 #

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

HTML主体结构 #

<div class="layout">
    <div class="nav">
        navigation in here
    </div>
    <div class="sidebar">
        sidebar in here
    </div>
    <div class="content">
        content in here
    </div>
</div>

问题原因及解决方法 #

媒体查询失效的核心原因是拼写错误：你把媒体查询中的 max-width 误写成了 max-with，浏览器无法识别这个错误属性名，导致整个媒体查询规则不生效。

修正后的媒体查询代码如下：

@media (max-width: 640px){
    .sidebar {
        flex-basis: 100%;
        border-right: 0;
    }
    .content {
        flex-basis: 100%;
    }
}

其他配置都是正确的：

• viewport元标签设置无误，能让移动设备正确识别屏幕宽度
• Flex布局的基础配置正常，flex-wrap: wrap可确保元素空间不足时自动换行

修改后，当屏幕宽度≤640px时，侧边栏和内容区会自动占满整行，实现预期的响应式布局效果。

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