所有分辨率屏幕@media

Question

我有這個網站：http://test.dac-proiect.ro/wp/

在底部有一個具有以下CSS代碼一個div（ 「despre NOI」）：

@media screen and (min-width: 1300px) { 
    #top { 
     background-image:url(img/DESPRE-NOI.png); 
     width:400px; 
     height:38px; 
     margin-left:36%; 
     margin-top: 92px; 
    } 
} 
@media screen and (min-width: 1440px) { 
    #top { 
     background-image:url(img/DESPRE-NOI.png); 
     width:400px; 
     height:38px; 
     margin-left:36%; 
     margin-top: 19.5%; 
    } 
} 

對於這兩項決議DIV我設置了「despre NOI」與中心對齊：

要做到這一點，你應該做的是什麼呢？我使用「屏幕媒體」作爲最常見的解決方案？

Answer 1

如果您希望despre-noi圖像始終位於頁腳頂部（已修復），則應將其移動到頁腳頂部。你需要把它包裝在一個div中，例如：

<div class="top-container"> 
    <div id="top"></top> 
</div> 

這樣就可以阻止頁腳背景應用到它。然後，您可以使用CSS將圖像居中放置，類似於上面的操作。如果你想要它的所有決議，只是離開媒體查詢。

Answer 2

<div id="container">      
         <div id="top"></div> 
          <div id="mid" style="display: none;"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
          </div> 

</div> 

    <div id="footer"> 
     <div id="meniu"> 
     <?php wp_nav_menu(array('sort_column' => 'menu_order', 'container_class' => 'menu-header')); ?> 
     </div> 
     <div id="copyright"> 
     <h1 id="text_c">© Codoban.com All rights reserved</h1> 
     </div> 
    </div> 
    </body> 
</html> 

所以應該是？

#footer 
{ 
    text-align: center; 
    border:0px solid #fff; 
    width: 100%; 
    background:url(img/BODY-MENU.png); 
margin:0px; 
bottom:0px; 
position: fixed; 

}