創建我的菜單欄調整爲瀏覽器的大小改變

Question

我想創建與社會的圖標菜單欄，將調整和充分契合瀏覽器大小的瀏覽器改變寬度。

目前我的社交圖標與菜單標誌重疊，我想讓它調整尺寸以適應與瀏覽器爲100％時相同的位置，或者菜單欄向下移動以適應它們的位置。我只是不想要任何重疊。

這裏是我的菜單欄與瀏覽器100％

這裏是我的網站看起來瀏覽器時，擠壓等。

而且，這裏是我的CSS代碼櫃面有需要被添加到任何東西。

html,body { 
    background:url(images/background.png); 
    background:no-repeat; 
    background-size:cover; 
} 

#bar { 
    margin-top:55px; 
    max-width:1920px; 
    height: 30px; 
    background: #2E2E2E; 
    border: 3px groove #FFD700 ; 
} 

#logo { 
    position:absolute; 
    background-image:url(images/LOGO1.png); 
    background-size:150px; 
    width:150px; 
    height:150px; 
    margin:0 auto; 
    z-index:1; 
    top:0px; 
    left:0px; 
    right:0px; 
} 

#social { 
    top:18px; 
    left:15%; 
    height:32px; 
    width:20%; 
    z-index:5; 
    position:absolute; 

} 

.facebook { 
    background-image:url(images/64_x_64px/facebook_dark.png); 
    height:32px; 
    width:32px; 
    background-size:32px; 
    display:inline-block; 
} 
.facebook:hover { 
background-image:url(images/64_x_64px/facebook_active.png); 
} 
.twitter { 
    background-image:url(images/64_x_64px/twitter_dark.png); 
    height:32px; 
    width:32px; 
    background-size:32px; 
    display:inline-block; 
} 
.twitter:hover { 
background-image:url(images/64_x_64px/twitter_active.png); 
} 
.in { 
    background-image:url(images/64_x_64px/in_dark.png); 
    height:32px; 
    width:32px; 
    background-size:32px; 
    display:inline-block; 
} 
.in:hover { 
    background-image:url(images/64_x_64px/in_active.png); 
} 
.youtube { 
    background-image:url(images/64_x_64px/youtube_dark.png); 
    height:32px; 
    width:32px; 
    background-size:32px; 
    display:inline-block; 
} 
.youtube:hover { 
    background-image:url(images/64_x_64px/youtube_active.png); 
} 

Answer 1

使用基於百分比的尺寸而不是像素值。如果可以避免使用尺寸，並且將父容器設置爲100％，則不要使用尺寸。

Answer 2

首先你不應該放置你的社交圖標與「位置是：絕對的」塊，這是爲更好的輔助功能，如果你把圖片在HTML中使用alt屬性，而不是在CSS。

對於你的情況，你可以做這樣的事情（嘗試REDIMENSION您的瀏覽器）： http://jsfiddle.net/QtHm6/1/

#logo { 
    width: 30%; 
    max-width: 150px; 
    margin:0 auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

#logo img { 
    width: 100%; 
} 

#social { 
    height:32px; 
    width:20%; 
    background-color: red; 
} 

#bar { 
    height: 30px; 
    background: #2E2E2E; 
}