[英]one element will not display at media query 1280px
使用谷歌瀏覽器和窗口大小調整器。.我創建了一個響應式網站，移動優先，該網站在480px至1366px的所有分辨率下均可正常運行，但是兩個元素在1280px上均無法顯示，其他所有內容均顯示正常，請參見圖片和CSS
70％的網站是在480px分辨率下創建的，然后我將名人子菜單和內容添加到媒體查詢1366px，然后將其添加到1280px
參見圖片進行視覺表示[我最初使用@media屏幕，嘗試使用@media all，現在使用@media only屏幕]
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>
在您的CSS中，您有<div id="gridContainer clearfix將這個clear：both;都添加到.gridContainer的css部分
然后使用代碼驗證器檢查其他錯誤
通過向媒體查詢1280px中添加以下內容，設法解決了這一問題。 @media only屏幕和（最小寬度：1025px）和（最大寬度：1280px）。 現在，我可以自由地設置該分辨率了。 不知道為什么它不會像在其他分辨率下對這兩個元素所做的那樣最初在1280px處開始，但是將min-wdith從1025px開始就可以了。
為什么@media被覆蓋，即使我的最大高度是768px而不是1280px？
[英]Why is @media overridden even though my max-height is 768px and not 1280px?
@media screen and (min-width: 1280px){ 即使我的分辨率是 1920*1080 也不起作用
[英]@media screen and (min-width: 1280px){ does not work even though my resolution is 1920*1080
對於大於 1280 像素的屏幕尺寸，我如何在頁面的正文標簽上強制設置邊距（左右為 50 像素）
[英]How can i force a margin (right and left to 50px) on the body tag of my page for screen sizes above 1280px
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.