Question

我是这个前端设计的新手，到目前为止一切都很顺利，但我一度陷入困境，知道如何解决它，希望有人能帮助我。

所以我在这里写了这个CSS代码：

/*  Universal Reset 
**********************************/

@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700|Slabo+27px);

*{ /*Universal selector */
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body{
    background-color: #727272;
    font-family: "Lato", "open-sans", "sans-serif";
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
}

.wrapper{
    background-color: #FFF9C4;
    color: #727272;
    margin: 20px;
    border-radius: 10px 10px 0 0;
}

@media(min-width: 768px){
    .wrapper{
        background-color: #00BCD4;
        border-radius: 0 0 0 0;
        width: 748px;

    }
}

我的问题是，每当我将屏幕尺寸缩小到768px以下时，页面保持相同，就好像没有媒体查询一样，然后我继续将其减少到688px以下，然后页面根据代码工作。为什么会这样？

我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Le Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div class="wrapper">
    <header class="site-header">
        <h1 class="logo">LOGO</h1>
        <nav class="site-nav">
            <ul>
                <li class="active"><a href="page.html">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </nav>
    </header>

    </div>
    </body>
    </html>

媒体查询无法正常工作

0 个答案: