如何解决页面收缩问题？无法使用@media且容器未按预期缩小

• 你当前代码的核心问题是没有添加@media媒体查询规则，所以当屏幕宽度低于1200px时，根本没有触发容器缩小的逻辑。
• 另外，.container设置了固定宽度1172px，在小屏幕下不会自动收缩，需要在媒体查询里修改它的宽度属性。

修改后的完整代码如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: auto;
    background: #000;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #e8e6e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    width: 1172px;
    max-width: 90%; /* 可选：避免小屏幕下容器贴满边缘，提升视觉体验 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 添加媒体查询，针对宽度低于1200px的屏幕 */
@media screen and (max-width: 1200px) {
    .container {
        width: 90%; /* 改成百分比，让容器自适应屏幕宽度 */
        /* 也可以用以下组合，适配更灵活： */
        /* width: auto; */
        /* max-width: 90%; */
    }
}

说明：

• @media规则必须写在基础样式之后，才能覆盖固定宽度的设置。
• 百分比宽度或max-width+auto的组合，可根据实际布局需求灵活选择。

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