CSS media queries不生效求助：HTML/CSS练习项目响应式开发问题

开发者阿泽

2026-9-25

问题原因及解决方案

1. CSS媒体查询语法错误

你当前编写的媒体查询规则@media screen and(max-width:500px)存在语法问题，and关键字和后续的括号之间必须保留一个空格，否则浏览器无法识别该规则，自然不会生效。
修改后的CSS规则如下：

@media screen and (max-width:500px){
    h1{color:blue;}
}

如果后续出现样式优先级冲突，也可以把选择器改成.top匹配你给标题加的类名，优先级更高。

2. HTML结构嵌套错误

你当前的HTML标签嵌套顺序不符合规范：<link>、<meta>、<title>这类元数据标签必须放在<head>标签内部，<body>标签要放在<head>标签的同级后面，不能把<body>写到<head>内部，结尾也不能是</body></head></html>的错误顺序。标签嵌套错误可能导致浏览器解析页面时出现异常，影响CSS加载和规则生效。
修正后的HTML参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历页面</title>
    <meta name="description" content="Our first page">
    <link rel="stylesheet" href="resumecss.css">
</head>
<body>
    <div class="box">
        <img class="chung" src="chungus.png" alt="头像">
        <h1 class="top">Cameron Marshall</h1>
    </div>
    <div class="container">
        <div class="a">Contact Info:</div>
        <div class="b">Skills:</div>
        <div class="c">Objective:</div>
        <div class="d">Work Experience:</div>
        <div class="e"></div>
    </div>
</body>
</html>