如何使用自適應設計原則修復此屏幕尺寸問題？

對於我的一個項目，我決定開始使用響應式設計。我使用的指南並不是確切的，純粹的介紹性的，所以我迷失在某處，在這裏找不到問題。如果使用下面的代碼，你會呈現自己的導航菜單。它在13英寸的屏幕上看起來很好，但通過縮短瀏覽器的寬度來縮小屏幕尺寸，您會注意到導航菜單將佔據徽標的空間。我該如何調整這一點，以便導航菜單不會位於徽標的頂部，並且可能會在徽標結束之前停止？如何使用自適應設計原則修復此屏幕尺寸問題？

HTML：

<header class="bar_top"> 
    <div class="logo_block"> 
     <a href="index.php"> 
      <img alt="Logo" src="/logo.png" class="logo"> 
     </a> 
    </div> 
    <nav class="menu_above"> 
     <ul class="menu"> 
      <li class="menu_inner"><a href="#">Home</a></li> 
      <li class="menu_inner"><a href="#">Our Products</a></li> 
      <li class="menu_inner"><a href="#">Services</a></li> 
      <li class="menu_inner"><a href="#">About Company</a></li> 
      <li class="menu_inner"><a href="#">Contact</a> 
       <ul class="menu_layer"> 
        <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a> 
        </li> 
        <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a> 
        </li> 
        <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a> 
        </li> 
       </ul> 
      </li> 
      <span class="phone_us">000-000-0000</span> 
     </ul> 
    </nav> 
</header>

CSS：

.bar_top { 
    background-color: #FFFFFF; 
    font-size:14.5px; 
    width: 100%; 
    height: 82px; 
    top: 0; 
    left: 0; 
    position:absolute; 
    z-index: 99; 
} 

.logo_block { 
    display: block; 
    position: absolute; 
    z-index: 998; 
} 
.logo { 
    margin-left: 30px; 
    margin-top: -3px; 
    height: 85px; 
} 
.menu_above { 
    width: 960px; 
    margin: 40px auto; 
    float:right; 
} 
.menu_layer { 
    margin-left: -40px; 
} 
.menu_contact_is { 
    color: #ffffff !important; 
} 
a.menu_contact_inner { 
    color: #ffffff !important; 
} 
.phone_us { 
    font-size: 1.5625em; 
    margin-left: 75px; 
}

來源

2013-04-23 ariel

嘗試屬性保證金：汽車;設置在屏幕上或容器的中心元素，而不是使用靜態值來定位元素

你也可以閱讀有關靈活的設計和響應式設計瞭解。

來源

2013-04-23 01:45:54 Fosfor

我使用margin：40px auto;但現在我正在訴諸簡單地定義邊緣剩餘部分，因爲看起來我無法使用我上面提到的工作來工作。 – ariel 2013-04-24 03:01:33

如果你想保持旁邊的菜單標識在頁面的左側，你應該試試這個：

.logo_block { 
     display: inline-block; 
     vertical-align: top; 
    } 

.menu_above { 
     margin: 40px auto; 
     display: inline-block; 
}

是很常見的包裝與具有固定一個div容器中的內容帶有和自動邊距以將其保留在頁面的中心。

你也應該考慮爲你使用不必要的相對定位修改其他元素你頁面上。 ;）

來源

2013-04-23 04:24:39

感謝您的回覆。其他相對位置對於我與之衝突的其他元素來說是必需的。但是我確實從.logo文件中刪除了一個。 – ariel 2013-04-24 03:00:53

如何使用自適應設計原則修復此屏幕尺寸問題？

回答

相關問題