所有分辨率屏幕@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; 

}