时间戳

首页 > 解决方案 > 当我将文件托管到我的网站时，媒体查询将不起作用

html - 当我将文件托管到我的网站时，媒体查询将不起作用

问题描述

我一直在尝试将我制作的一个虚构网站上传到我的网站上。我已将其上传到以下位置：https ://codehero.life/projects/omnifood/index.html

问题是当我在本地主机上尝试该站点时，媒体查询工作得很好。一切都在本地主机上正常工作。但是在网站上，查询不起作用。当它是移动设备时，我已经实现了一个汉堡菜单，但是没有发生这种情况，我得到了空白等。您可以通过上面的链接进行检查。

我已经实现了“视口”标签，从我的代码中删除了注释，仍然无法正常工作。甚至尝试将整个媒体查询文件放入我的 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">

标签： htmlcssmedia-queries

解决方案

因为 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!
}

推荐阅读