使用Media Queries实现800px断点响应式布局代码失效求助

你的代码存在几个核心问题导致响应式效果不生效：

• 媒体查询断点设置为600px，和需求的800px不符
• 媒体查询块为空，所有样式写在全局作用域，后面的全宽样式直接覆盖了前面的并排样式
• 重复定义相同选择器，造成不必要的样式冲突

以下是修正后的完整代码，采用移动端优先的写法（更符合现代响应式开发规范）：

/* 全局基础样式（移动端默认布局：上下堆叠） */
#container {
    width: 100%;
    margin: auto;
}
#header {
    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color: rgb(101, 161, 109);
}
#sidebar {
    width: 100%;
    height: 500px;
    background-color: rgb(251, 127, 255);
}
#main {
    width: 100%;
    height: 500px;
    background-color: brown;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: aqua;
}

/* 桌面端布局：视口宽度大于800px时，侧边栏与主内容并排 */
@media screen and (min-width: 800px) {
    #sidebar {
        width: 20%;
        float: left;
    }
    #main {
        width: 80%;
        float: left;
    }
}

关键修正说明： #

1. 断点调整：将媒体查询断点改为需求的800px，视口宽度超过800px时触发桌面布局
2. 移动端优先：先定义移动端全宽堆叠样式作为默认，再通过媒体查询覆盖桌面端的并排样式（CSS后定义的样式优先级更高）
3. 移除冗余代码：删除重复的选择器定义，仅在媒体查询中修改需要变化的属性（侧边栏和主内容的宽度、浮动）
4. 简化浮动使用：仅桌面端需要浮动实现并排，移动端无需浮动，避免不必要的布局问题

如果需要桌面端优先的写法（先定义桌面样式，再覆盖移动端），代码如下：

/* 桌面端默认布局：侧边栏与主内容并排 */
#container {
    width: 100%;
    margin: auto;
}
#header {
    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color: rgb(101, 161, 109);
}
#sidebar {
    width: 20%;
    height: 500px;
    background-color: rgb(251, 127, 255);
    float: left;
}
#main {
    width: 80%;
    height: 500px;
    background-color: brown;
    float: left;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: aqua;
    float: left;
}

/* 移动端布局：视口宽度小于800px时，上下堆叠 */
@media screen and (max-width: 799px) {
    #sidebar {
        width: 100%;
        float: none;
    }
    #main {
        width: 100%;
        float: none;
    }
}

补充提示： #

• 建议在HTML的<head>标签中添加视口元标签，确保移动端布局正确渲染：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 浮动布局可能导致容器高度塌陷，若遇到该问题，可给#container添加清除浮动的样式：

#container::after {
    content: "";
    display: table;
    clear: both;
}

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