Question

使用谷歌浏览器和窗口调整器.. 我创建了一个响应式网站，移动优先，该网站在480px到1366px的所有分辨率下工作正常，但是1280px上不会显示两个元素，其他一切都显示正常，请参阅pics和css

该网站的70％是以480px分辨率创建的，然后我将名人子菜单和内容添加到媒体查询1366px，然后再添加到1280px

查看用于视觉表示的图片[我最初使用的是@media屏幕，尝试了@media all，现在只有@media屏幕]

http://s1305.photobucket.com/user/dorian61/library/?view=recent&page=1

**CSS**

img, object, embed, video{
    max-width:100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

    #header{
        clear: none;
        width: 97%;
    }

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    padding: 1%;

}

    /*Navigation menu*/
    #horznav {
clear: both;
        display: block;
        width: 97%;
        padding: 1%;
        margin-left: auto;
        margin-right: auto;
        background-color: #080829;

    }


    #horznav a {
        text-decoration: none;
        color: #FFFFFF;
        padding: 0 10px ;
        margin-left: auto;
        margin-right: auto;
    }

    #horznav a:hover {
        color: #5f9ea0;
    }

    /*End of Navigation menu*/



    /*aside*/

#aside_container{
    width:100%;

}
    h3{
        color: #ffffff;
    }

    .news_header_1,.news_header,.news_header_3{
        clear: both;
        width: 97%;
        padding: 1%;
      margin-top:5px;
        height:50px;
        text-align: center;
        background-color:#080829 ;
        margin-left: auto;
        margin-right: auto;
    }


    .picture_box {
        width: 95%;
        padding: 2%;

    }


    #News1a,#News2,#News3 {

        width: 97%;
        padding: 1%;
        margin-left: auto;
        margin-right: auto;
        background-color: #080829;
       margin-top:5px ;
    }

    /*End of aside*/



    /*World news*/

#world_news{
        display: block;
        clear: none;
        width: 97%;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
        padding:1%;
        color: #080829;
        border: solid 1px #5f9ea0;
        margin-top:5px ;
    }

#News_extra,#_first{
    display: none;
}

#mark_1{
    margin-top:10px;
}
    /*End of world news*/




    footer {
        display: block;
        clear: both;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        background-color: #080829;
        color: white;
        text-align: center;

    }




/*Iphone*/
@media screen and (min-width: 640px) {
    .nav_p{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    #News_extra,#_first{
        display: none;
    }
}



/*Tablets*/
@media only screen and (min-width: 768px) {
.nav_p{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

    #News_extra,#_first{
        display: none;
    }
}




/*Medium screens*/
@media only screen and (min-width: 1024px){
    #horznav{
        width: 98%;
    }
#aside_container{
    float: right;
    clear: none;
    width: 40%;
}

    .nav_p {
        width: 45%;
        margin-left: auto;
        margin-right: auto;
    }


#world_news{

    clear: none;
    float: left;
    width: 57%;
}


}



/*Netbook*/
@media only screen and (min-width: 1280px) {

    .nav_p {
        margin-left: auto;
        margin-right: auto;
    }

    #News_extra{
        display: block;
        float: left;
        width:57%;
        height: 30px;
        background-color: #080829;
        color: #ffffff;
        margin-top: 5px;
    }
    #_first{
        display: block;
        float: left;
        width: 57%;
        padding:1%;
        height:325px;
        margin-top: 5px;
        background-color:#080829;
        color: #ffffff;
    }

}

/*Desktop screens*/
@media only screen and (min-width:1366px) {

    .nav_p {
        width: 35%;
        margin-left: auto;
        margin-right: auto;
    }

    #News_extra {
        float: left;
        width: 59%;
        height: 50px;
        display: block;
        background-color: #080829;
        color: #ffffff;
        margin-top: 5px;
    }

    #_first {
        display: block;
        float: left;
        width: 57%;
        padding: 1%;
        height: 285px;
        margin-top: 5px;
        background-color: #080829;
        color: #ffffff;
    }

    @media only screen and (min-width: 1440px) {

        #News_extra {
            float: left;
            width: 59%;
            height: 50px;
            display: block;
            background-color: #080829;
            color: #ffffff;
            margin-top: 5px;
        }

        #_first {
            display: block;
            float: left;
            width: 57%;
            padding: 1%;
            height: 335px;
            margin-top: 5px;
            background-color: #080829;
            color: #ffffff;
        }

    }
}

HTML

<!DOCTYPE HTML>
<html lang="en">


    <head>

    <meta charset= "utf-8">
        <meta name="descripton" content="Everything you wanted to learn about World News"/>

        <meta name= "keywords" content="sport, news, politics, current affairs, music"/>

<meta name="robots" content=index,follow/>
 <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--end of meta news-->


<base href="index.html"/>

<link href="Newscorp.css"   rel="stylesheet"  type="text/css"/>

    <title>News</title>

</head>


    <!--welcome message-->

<body  onload = "alert ('hello and welcome')">

<!--welcome message-->

<noscript>please enable javascript</noscript>



    <div id="gridContainer clearfix">

<header>
    <img id="header" src="jpg/headone.jpg">

    </header>



        <!--Navigation menu-->      

<nav id="horznav">
  <p class="nav_p">

 <a href = http://www.bing.com>Home</a>
 <a href = http://www.aol.com>Products</a>
 <a href = http://www.bbc.co.uk>Abouts us</a>
 <a href = http://www.google.com>Info Mania</a>
 <a href = http://www.yahoo.com>Contact Us</a>

  </p>

</nav>

        <!--End of Navigation menu-->



        <!--aside-->
<div id="aside_container">
<div class="news_header_1"> <h3>Man United Vs Liverpool</h3></div>

        <aside id="News1a">

        <a id= "manulive" title ="A Game They Can't Afford To Lose, Click For More Info" href="http://www.bbc.co.uk/sport/0/football/34215789">
      <img class ="picture_box" src="jpg/manulive.jpg"/></a>

  </aside>



        <div class="news_header"> <h3>The Blind Hiker</h3></div>

   <aside id="News2">


     <a class= "blind_hiker" title ="The Blind Hiker, Click For More Info" href="http://www.bbc.co.uk/news/blogs-ouch-34186187">
       <img class ="picture_box" src="jpg/blind_hiker.jpg"/></a>
  </aside>

        <div class="news_header_3"> <h3>Matt Damon in The Martian</h3></div>

    <aside id="News3">

   <a class= "ava" title ="AI fact or Fiction, Click For More Info" href="http://variety.com/2015/film/festivals/toronto-film-review-matt-damon-in-the-martian-1201590528/">
     <img class ="picture_box" src="jpg/the_martian.jpg"/></a>

  </aside>

</div>

    <!--Main content World news-->


<main id="world_news">
    <h2>Shares in China</h2>

<p>Chinese shares have closed lower despite a fresh rate cut by the central bank.
The mainland's benchmark Shanghai Composite fell 1.27% to 2,927.29, after veering in and out of negative territory.

It had fallen about 16% this week, rocking global markets.

On Tuesday, China's central bank cut its key lending rate by 0.25 percentage points to 4.6% in a bid to calm stock
    markets after the past days' turmoil.

The dramatic losses and volatility in China have shattered investor confidence and led to sharp falls in Asia and the US over the past days.

European markets were down by about 1% in morning trading on Wednesday, after rallying on Tuesday.

The interest rate cut was the fifth by the People's Bank of China since November last year. </p>

<div class =line_seperator"></div>

    <div class="h_2">
    <h2>In pictures: Artists take over Ghana's streets</h2>

    <p>1st November 2015</p>

    <p>The streets of Ghana's capital have been alive with artistic talent, from photography and graffiti to live music
        and DJ sets, says photographer Nana Kofi Acquah, who joined the crowds enjoying a four-day cultural festival:</p>
    <p>More than 200 artists and performers took part. This performance piece, called African Resurrect, provided some high-concept food for thought. </p>
</div>

    <div class="h_2">

    <h2>Analysis: Robert Peston, BBC business</h2>

    <p>In some ways I thought yesterday's events on markets were if anything more disturbing than Monday's global rout.

        Because if share-price gains could not hold after the significant monetary easing by China's central bank, then mistrust
        about the true state of the world's second largest economy (actually the number-one economy on the purchasing-power-parity
        measure of GDP) has become very pronounced indeed.

        And another thing, the Chinese interest rate cuts will exacerbate the phenomenon that has caused so much stress in so many
        different global markets, from commodities, to foreign exchange, to stocks and bond</p>
</div>

<div class="h_2">
    <h2>Migrant crisis: In Mainland Europe</h2>

    <p>1st November 2015</p>

    <p>Hundreds of migrants have been protesting outside a major railway station in the Hungarian capital after police
        sealed off the terminal to stop them travelling through the EU.
    <p>Government spokesman Zoltan Kovacs defended the closure, saying Hungary was trying to
    enforce EU law.</p>
</div>

</main>
        <section id ="News_extra"><h2>Celebrity News</h2></section>
       <section id ="_first">

           <h3>Seven Things Lady Gaga's New Album Needs To Deliver</h3>
           <p>The next few months are make or break for Lady Gaga. Poised for the release of her
               fifth studio album, the singer knows she has a lot to prove following, what can
               only be described as, a rocky few years. Once the biggest popstar in the world
               with more number ones and awards than you could shake a disco stick at, the wheels
               fell off after the release of her last album Artpop in 2013.

               <p>Ashley Percival[Entertainment Reporter, The Huffington Post UK]</p>

           <hr>

           <h3>Join the Revolution!</h3>

           <p>The industry is changing, slowly, and at last consumers are starting to demand
               change - especially through glorious campaigns like #FashRev and #WhoMadeYourClothes.
       </section>

<marquee id="mark_1">   Latest News: <a id="uk_ref" href="http://www.bbc.co.uk">UK Referendum, this autumn________Sport: Neymar on the move to Man United
_____Business News: UK heading back into recession</a></marquee>

        <!-- Footer -->
<footer><p>(c) 2010 The Example company</p></footer>

   <!-- End of footer-->


 </div>
</body>



      </html>

Answer 1

在你的css中你有<div id="gridContainer clearfix 将此 clear：both; 添加到.gridContainer

的css部分

然后使用代码验证器检查其他错误

Answer 2

通过将以下内容添加到媒体查询1280px，设法解决了这个问题。 @media only screen和（min-width：1025px）和（max-width：1280px）。我现在可以自由地设定该分辨率。不知道为什么它不会在1280px处出现，就像它在其他分辨率方面的两个元素一样，但是以1025px开始min-wdith，完成它。

媒体查询中不会显示一个元素1280px

2 个答案: