css - 屏幕分辨率/缩放自适应网站

Question

我正在为某人制作一个网站，我希望它根据屏幕分辨率和浏览器的缩放来调整自己的大小（我不包括智能手机）。我目前有一个这样的菜单：

菜单中的每个元素都在一个 div 中，这是 css：

#barre_utilisateur //For the menu bar(the red bar)
{
    height:45px;
    background-color:#A31E39;
    width:100%;
}
#content_boutton_accueil //the home button
{
    margin-left:2%;
    width:200px;
    display:inline-block;
}
#notification //exclamation mark button
{
    cursor:pointer;
    width:60px;
    height:45px;
    display:inline-block;
}

现在，我想要用户按钮左侧右侧的齿轮图标。我不明白我怎么能做到这一点。

另外，当我放大太多时，菜单的右侧部分会脱离它应该在的位置，有没有办法防止这种情况发生？

我想要实现的一个很好的例子是新的 Outlook 实时页面

Answer 1

您可以相对定位整个菜单 div (#barre_utilisateur)，然后绝对定位它的子项。例如：

#barre_utilisateur {
   position: relative;
} 

#cogwheel {
   position: absolute;
   right: 0;
}

另一种方法是在菜单中放置 2 个 div (#barre_utilisateur)，然后将第一个浮动到左边，另一个浮动到右边。