Question

我的媒体查询之前工作得很好，但在某些时候他们停止了工作，我无法弄清楚我做错了导致这种情况。我没有在媒体查询本身内特别改变任何内容。我一直在研究CSS，所以我认为这很可能是我在那里做的事情造成的。

HTML

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VAMP</title>
<link href="styles.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" type="text/css" href="nivo-slider.css">
<link rel="stylesheet" type="text/css" href="themes/default/default.css"> 
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
  <h1>VAMP</h1>

</div>
        <nav>
            <ul>
                <li>
                <a href="fashion.html">fashion</a>
                    <ul>
                        <li><a href="streetstyle.html">Street Style</a></li>
                        <li><a href="celebstyle.html">Celebrity Style</a></li>
                         <li><a href="runway.html">Off the Runway</a></li>
                    </ul>
                </li>
                <li><a href="beauty.html">beauty</a>
                    <ul>
                        <li><a href="makeuptut.html">Makeup Tutorials</a></li>
                        <li><a href="productrev.html">Product Reviews</a></li>
                        <li><a href="hair.html">Hair</a></li>
                        <li><a href="nails.html">Nails</a></li>
                    </ul>
                </li>
                <li><a href="music.html">music</a>
                    <ul>
                        <li><a href="topartists.html">Top Artists</a></li>
                        <li><a href="newmusic.html">New Music</a></li>
                    </ul>
                </li>
                <li><a href="entertainment.html">entertainment</a>
                <ul>
                        <li><a href="celebgossip.html">Celebrity Gossip</a></li>
                        <li><a href="celebinterviews.html">Celebrity Interviews</a></li>
                        <li><a href="moviereviews.html">Movie Reviews</a></li>
                    </ul>
                </li>

            </ul>
        </nav>



<div id="wrapper">

    <div id="left">
        <h2>Article</h2> 
            <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  </p>
    </div> 

    <div id="middle"> 
        <h2>Article</h2>
            <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg</p>
    </div> 

    <div id="right"> 
            <h2>Article</h2>
                <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh         hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh     hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg </p>

    </div>
    </div>

    <footer>
    Footer content goes here
    </footer>


    </body>
    </html>

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display|Oxygen:700|Oxygen:300);  

/*----------GENERAL----------*/
* {
    padding: 0;
    margin: 0;
} 

ol li {
    margin: 0.5em 2em;
    padding-left: 0.5em;
}
 body {
    margin: 0 auto; 
    width: 960px;
    border: 1px solid #777;
    padding: 10px;
    font-family: 'Oxygen', sans-serif;
    font-weight:300;
} 
img {
    max-width:100%;
}
#container{
    width:960px;
}

/*----------HEADINGS----------*/
#header{
    border-bottom:white;
    background-image: url(image/fancy-pants.jpg);
    padding: 15px;
    text-align:left;
    letter-spacing: 6px;
}
#header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    color:white;

    text-align:center;
}
h2{
    font-family:'Oxygen', sans-serif;
    text-transform:uppercase;
}

/*---------NAVIGATION---------*/
nav {
    font-family: 'Josefin Sans', sans-serif;

}
nav li {
    display:block;
    width: 25%;
    background-color: #000;
    position:relative;
    float:left;
    list-style:none;
}
nav a {
    text-decoration: none;
    font-size: 17px;
    color: white;
    padding:6pt 0;
    text-align: center;
    display: block;
    border-bottom: 3px white solid;
    text-transform:uppercase;
} 
nav a:hover{
    background: #d04576;
    border-bottom: 3px white solid;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
     -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
nav ul li ul {
    display:none;
    width:100%;
}
nav li:hover ul {
    display: block;
    width:100%;
}
nav li li{
    float:none;
    width:100%;
    background:
}
/*--------CONTENT COLUMNS-------*/

#wrapper{
    width:100%;
    overflow:hidden;
}
#middle{ 

    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#left, #right, #middle{
    width: 29%;
    float:left;
    padding:2%;
}


/*---------FOOTER---------*/
footer{
    width: 960px;
    margin: 0 auto 8px;
    color:#fff;
    background:#000;
    height:4em;
    text-align:center;
    padding:1%;
}

}
@media screen and (max-width: 960px) {
    body {
        width: 100%;
    }

    nav li {
        width:100%;
    }
    footer{
        width:100%;
    }
}

Answer 1

@media选择器上方有一个额外的}。只是摆脱那个角色，它应该工作正常。

}

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

媒体查询已停止工作

1 个答案: