html - 标题元素 [logo 和菜单] 根据屏幕分辨率改变位置

Question

我有我的这个网站www.virtualcloudguru.com。现在这里的问题是标题（徽标和菜单）。我已经为徽标和菜单定义了一个固定的 100 像素填充，但如果屏幕分辨率发生变化，它将向左/向右移动。

现在有2种方式

我已经复制了jsfiddle中的代码。虽然不完整

score 2 · Accepted Answer

如果你想让元素根据屏幕分辨率改变位置，你可以使用 CSS 媒体查询。这是一个适用于您的页面的示例：

@media screen and (max-width: 600px) {
    #header .top-logo, #header ul {
        padding-left: 0;
    }
}

您可以将这@media一行视为类似于 CSS 的“if”语句。在这种情况下，如果媒体是屏幕（即不是打印等）并且最大宽度为 600 像素，则将徽标的左侧填充为 0 并在标题中列出。

换句话说，本@media节中的任何 CSS 规则仅在浏览器的可见窗口宽度为 600 像素或更小时有效，在这种情况下，它们会覆盖任何以前的 CSS 规则。

将此添加到 CSS 的末尾并尝试缩小浏览器的窗口以查看效果。

编辑：我忘了补充说可以有多个@media部分。例如，您可以添加第二个部分，其中max-width: 480px包含（或类似的）小屏幕规则。

编辑 2：将徽标和菜单居中

徽标具有固定宽度，因此我们可以将其设为块元素并使用margin: 0 auto，如下所示：

#header .top-logo {
    display: block;
    margin: 0px auto;
    padding: 0;
    width: 425px;
}

请记住删除您现有的float: left.

对于菜单，这只是文本，因此我们可以使用text-align: center. 同样，请记住删除float: leftli 元素上的现有元素——我们将使用它display: inline。

#header ul {
    padding: 0;
    text-align: center;
}
#header ul li {
    display: inline;
}

顺便说一句，请在实施之前仔细检查这个跨浏览器。

score 1 · Accepted Answer

#header {
    width: 1130px;
    padding: 0;
}

#header .top-logo {
    padding: 0;
}

score 0 · Accepted Answer

如果您希望页眉始终保持相对于页面正文的相同位置，则将两者放入一个公共 div 中，并将您将应用于正文的 width: 和 margin: 属性应用于该容器.

您也可以将body元素用作公共容器，并对其应用宽度和边距，作为替代方案。

3 回答 3