响应式页面本地正常，上传学校服务器后失效求助

问题描述 #

我是HTML和CSS新手，制作的响应式页面在本地环境中media query可正常工作，但上传至学校服务器后响应式功能失效。页面<head>中已添加<meta name="viewport" content="width=device-width, initial-scale=1.0">标签，无法定位问题原因，恳请提供排查建议。

排查方向 #

• 核对CSS文件路径与存在性：服务器环境通常区分文件名大小写（比如Subpages.css和subpages.css会被视为不同文件），检查subpages.css的文件名、路径是否和本地完全一致；直接在浏览器地址栏输入CSS文件的完整URL，确认文件能正常加载。
• 强制清除浏览器缓存：服务器可能缓存了旧版本的CSS文件，按Ctrl+F5强制刷新页面，或使用无痕模式访问测试。
• 调整媒体查询顺序：当前代码中max-width: 820px的媒体查询写在max-width: 428px之后，会覆盖小屏幕的样式规则。CSS遵循“后定义优先”原则，应将小屏幕的媒体查询放在大屏幕的媒体查询后面，确保优先级正确。
• 检查基础样式冲突：当前提供的CSS仅包含媒体查询代码，缺少非响应式的基础样式。如果服务器上的完整CSS（或关联的其他CSS文件）中有固定宽度、浮动等冲突属性，可能会干扰媒体查询的生效，需确认基础样式是否存在冲突。
• 验证服务器MIME类型设置：确认服务器对CSS文件的MIME类型配置为text/css，若MIME类型错误，浏览器无法正确解析CSS文件。
• 核对文件编码一致性：确保服务器上的HTML和CSS文件编码与本地一致（推荐UTF-8），编码不一致可能导致样式解析异常。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Genesis Manuel</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="subpages.css" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
    <div id="wrapper">
        <header>
            <a href="index.html"> <h2>Genesis Manuel</h2></a>
        </header>
        <nav>
            <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="work.html">Work</a></li>
                <li><a href="interests.html">Interests</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
            <div class="contain">
                <div id="leftside">
                    <main>
                        <h1> About Me</h1>      
                        <p> Born and raised in the Philippines, moved to Canada soon after.</p>
                        <p> A good cup of Coffee + dessert will always make me smile.</p>
                        <p> If you like cheesecake, we'll get along just fine.</p>
                        <p> Culinary will always be my first love.</p>
                        <hr>
                        <br>
                        <h1>Work&ndash;Wise</h1>
                            <ul>
                                <li>Problem&ndash;solver&mdash;A critical thinker, able to rise up to challenges.</li>
                                <li>Positivity&mdash; I never let anything bring me down in a high paced environment.</li>
                                <li>Accountable&mdash; I take full ownership of my work and see it through the end.</li>
                                <li>Kaizen&mdash; Always looking for ways to improve.</li>
                                <li>Initiative&mdash; I always try to be one step ahead.</li>
                            </ul>
                    </main>
                </div>
                <div id="rightside">
                    <img src="resumeimages/portrait.jpeg" alt="myself"/>
                </div>     
            </div>   
    </div>
</body>
</html>

CSS代码 #

@media (max-width: 428px) {
nav {
float: left;
width: 100px;
height: auto;
background-color: white;}
nav ul { list-style-type: none;
padding-left: 0%;
line-height: 3em;
;}
.contain {display: block;
justify-content: space-between;}
#leftside h1 {
color: black;
clear: left;}  
#leftside p {font-size: 1em;
text-align: right;
color: black;
line-height: 1.5em;
text-indent: 0%;
font-size: medium;
position: relative;
}
#leftside ul {
text-align: center;
color: black;
line-height: 1.5em;
text-indent: 0%;
font-size: medium;
}
}

@media (max-width: 820px) {
nav {
float: left;
width: 100px;
height: auto;
background-color: white;}
nav ul { list-style-type: none;
padding-left: 0%;
line-height: 3em;
;}
.contain {display: block;}
#leftside p {font-size: 1em;
text-align: center;
color: black;
line-height: 1.5em;
text-indent: 0%;
font-size: medium;
position: relative;
}
#leftside ul {
text-align: center;
color: red;
line-height: 1.5em;
text-indent: 0%;
font-size: medium;
}
}

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