这段css代码的 @media 为什么在谷歌浏览器中不生效，Edge正常?

[已解决问题] 解决于 2020-04-26 10:51

这段css代码的 @media 为什么在谷歌浏览器中不生效，Edge正常???

@media (min-width: 992) 和@media (min-width: 1200)是照抄bootstrap3的，但是bootstrap3中的col-md这些都正常。


header .nav{
    padding-top: 5px;
    padding-bottom: 0px;
    border-bottom:1px solid black;
    box-shadow: 0 0 15px 0 #888;
    height: 70px;
}
header .nav .left{
    float: left;
    width: 200px;
    height: 60px;
    background-color: blanchedalmond;
}
header .nav .center{
    float: left;
    display: block;
}
header .nav .center li{
    float: left;
    list-style-type: none;
    width: 48px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    padding-top: 0px;
        
}
header .nav .center li a{            
    float: left;
    padding: 5px 5px;
    width: 50px;
    font-size: 15px;
    color: black;
    height: 50px;
    vertical-align: middle;
}
header .nav .center li a:hover{    
    color: black;
    background-color: #dedede;
    text-decoration: none;
}   
header .nav .right{
    float: right;
    border-left: #990000 1px solid;
    margin-top: 10px;
    color: #990000;
    width: 160px;
    text-align: right;
    font-size: 13px;
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992) {
    header .nav{
        padding-top: 5px;
        padding-bottom: 10px;
        height: 80px;
    }
    header .nav .left{
        width: 200px;
        height: 70px;
    }
    header .nav .center li{
        width: 80px;
        height: 80px;
        padding-top: 10px;
    }
    header .nav .center li a{    
        padding: 15px 5px;
        width: 80px;
        font-size: 15px;
        
    }
    header .nav .right{
        margin-top: 20px;
        width: 180px;   
    }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (max-width: 1200) { 
    header .nav{
        padding-top: 10px;
        height: 100px;
        background-color:rebeccapurple;
    }
    header .nav .left{
        width: 200px;
        height: 80px;
    }
    header .nav .center li{    
        width: 100px;
        height: 80px;
    }
    header .nav .center li a{    
         
        padding: 20px 5px;
        width: 90px;
        font-size: 19px;
        
    }
    header .nav .right{
        margin-top: 20px;
        width: 220px;
    }
}

相关HTML：

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="robots" content="noarchive">
    <title></title>
    <link href="/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/site.css" rel="stylesheet" />
    <link href="/css/index.css" rel="stylesheet" />
    <script src="/lib/modernizr-2.6.2.js"></script>
    <!--[if lt IE 9]>
        <script src="~/Plugins/html5shiv.min.js"></script>
        <script src="~/Plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>

<header>
    <div class="nav">
        <div class="container">
            <div class="left"></div>
            <ul class="center">
                <p>
                    <a href="#" class="active">网站首页</a>
                </p>
                <p>
                    <a href="#">测试测试</a>
                </p>
                <p>
                    <a href="#">测试测试</a>
                </p>
                <p>
                    <a href="#">测试测试</a>
                </p>
                <p>
                    <a href="#">测试测试</a>
                </p>
                <p>
                    <a href="#">测试测试</a>
                </p>
            </ul>
            <div class="right">
                客服电话：0476-8888888<br>
                客服电话：0476-8888888
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</header>

css3 html 媒体查询 media css