css - 针对媒体屏幕宽度问题的网站优化 (@media css)

Question

我有一个网页，我在其中放置了一些 @media css 属性，因为我想让它更具响应性。我有一个带有图像的标题。即使我在 chrome 上设置了最小宽度，它对于普通的 PC 屏幕看起来也很好。但在我的手机（nexus 4）中看起来不太好。图像未与屏幕中心对齐。

这是页面：PAGE。

在我的手机中，它看起来像这样：

我尝试了以下代码，但没有任何效果：

HTML：

<header>
   <div class="container_12">
      <div class="grid_12">
         <h1>
              <img src="images/logo.png">  
        </h1>
        <div class="clear">
        </div>
      </div>
   </div>
 </header>

CSS：

 @media only screen and (max-width: 479px) 
 {
    body 
    {
       min-width:300px;
    }

    header h1 
    {
       margin: 20px 0px 0px;
       float: none;    
    }
 }

我不得不说，我相信它不是一个类 "container_12" ，类 "grid_12" 问题，因为（除了带有图像的 h1 之外）它们还包括导航菜单，而这个就在中心。

Answer 1

我终于尝试了这个并且工作了。我愿意看到更多的选择（答案）。

header h1  img 
{
    width: 100%;
}