Html 媒体查询刚刚获胜'；当我将文件托管到我的站点时，它无法工作

我一直在尝试将我制作的一个虚拟网站上传到我的网站上。我已将其上传到以下位置：

问题是，当我在localhost上尝试该站点时，媒体查询工作正常。在本地主机上一切正常。然而，在网站上，查询根本不起作用。我已经实现了一个汉堡包菜单，当它是一个手机，但没有这样的事情发生，我得到了空的空间，等等。你可以通过上面的链接检查

我已经实现了“viewport”标记，从代码中删除了注释，但仍然不起作用。甚至尝试将整个媒体查询文件放入my styles.css而不是单独的css，但仍然不起作用。我试过让“仅媒体”和“媒体”也使用，但都不起作用。我哪里做错了

下面是querys.css

@media screen and (max-width: 1200px){
    .hero-text-box{
        width: 100%;
        padding: 0 2%;
    }

    .row{padding: 0 2%;}
}

@media screen and (max-width: 1023px){
    body{font-size: 18px;}

    section{padding: 60px 0;}

    .long-copy{
        width: 78%;
        margin-left: 11%;
    }

    .steps-box{margin-top: 10px;}
    
    .steps-box:last-child{margin-top: 10px;}
    
    .work-steps{margin-bottom: 40px;}
    
    .work-steps:last-of-type{margin-bottom: 60px;}

    .app-screen{width: 50%;}

    .icon-small{
        width: 17px;
        margin-right: 5px;
    }
    .city-feature{font-size: 90%;}

    .plan-box{
        width: 100%;
        margin: 0;
    }

    .plan-price{font-size: 250%;}

    .contact-form{width: 80%;}
}

@media screen and (max-width: 767px){

    body{font-size: 16px;}
    section{padding: 30px 0;}
    .row,.hero-text-box{padding: 0 4%;}

    .col{
        width: 100%;
        margin: 0 0 4% 0;
    }

    .main-nav{display: none;}
    .mobile-nav-icon{display: inline-block;}

    .main-nav{
        float: left;
        margin-top: 25px;
        margin-left: 25px;
    }

    .main-nav li{
        display: block;
    }

    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited{
        padding: 10px 0;
    }

    .sticky .main-nav{ margin-top: 10px;}

    .sticky .mobile-nav-icon i{color: black;}
    .sticky .mobile-nav-icon {margin-top: 10px;}

    .long-copy{
        width: 100%;
        margin-left: 0;
    }

    h1{font-size: 180%;}
    h1{font-size: 150%;}

    .work-steps{margin-bottom: 20px;}
    
    .work-steps:last-of-type{margin-bottom: 20px;}

    .work-steps div{
        
        height: 40px;
        width: 40px;
        padding: 4px;
        margin-right: 15px;
        font-size: 120%
    }

    .center-box{
        text-align: center;
    }

    .section-features{
        text-align: center;
    }

}

@media screen and (max-width: 480px){
    section{padding: 25px 0;}
    .contact-form{width: 100%;}

}

html的头

<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">

因为css是从上到下读取的。最后设置的规则是将要执行的规则。
请确保将所有媒体查询放在css文件的底部

@media (max-width: 600px) { //If my screen fits this size
   .your-class {
       color: black; //Paint it black
    }
}

.your-class {
    color: blue; //Now, forget about everything and paint it blue!
}

因为css是从上到下读取的。最后设置的规则是将要执行的规则。
请确保将所有媒体查询放在css文件的底部

@media (max-width: 600px) { //If my screen fits this size
   .your-class {
       color: black; //Paint it black
    }
}

.your-class {
    color: blue; //Now, forget about everything and paint it blue!
}

当我用实际的电话检查时，它似乎工作得很好。我在电脑上使用Edge Dev，因此可能会显示网站的缓存副本，或者可能是开发工具工作不正常。由于评论的原因，我能够进行验证。
当我使用实际电话检查时，它似乎工作正常。我在电脑上使用Edge Dev，因此可能会显示网站的缓存副本，或者可能是开发工具工作不正常。由于这些评论，我们能够进行验证。
刚刚查看了网站，看起来一切正常。我将您的站点大小调整为1100，我看到
.hero文本框的css正在启动。汉堡包图标也出现在手机上。上面的链接对我使用chrome中的开发控制台很好。汉堡包菜单起作用了。3行或X。我刚刚用另一部电话检查了这个网站，是的，它工作正常！我正在我的电脑中使用Edge Dev，所以这可能会有所帮助。非常感谢您的验证！只是看了一下网站，看起来一切正常。我将您的站点大小调整为1100，我看到
.hero文本框的css正在启动。汉堡包图标也出现在手机上。上面的链接对我使用chrome中的开发控制台很好。汉堡包菜单起作用了。3行或X。我刚刚用另一部电话检查了这个网站，是的，它工作正常！我正在我的电脑中使用Edge Dev，所以这可能会有所帮助。非常感谢您的验证！找到了我的答案，一切正常，这是我的错。谢谢找到了我的答案，一切正常，这是我的错。谢谢这里的课程是始终在多个浏览器上检查您的工作这里的课程是始终在多个浏览器上检查您的工作