html - 创建我的菜单栏以随着浏览器大小的变化而调整大小

Question

我正在尝试创建一个带有社交图标的菜单栏，该菜单栏会随着浏览器更改宽度而调整大小并完全适合浏览器的大小。

目前我的社交图标只是与菜单 Logo 重叠，我想让它们调整得更小以适应与浏览器 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%，则根本不要使用尺寸。