通过屏幕调整大小更改Div边距

Question

我正在创建一个带背景的导航菜单。 请访问网站http://lolraffle.com

我有以下HTML

<nav id="menu">
            <ul>
                <li><a href="#" id="home">HOME</a></li>
                <li><a href="#" id="faq">FAQ</a></li>
                <li><a href="#" id="contact">CONTACT US</a></li>
            </ul>
        </nav>

这个CSS使导航器完全悬停在菜单背景上。

nav#menu {
  position: absolute;
  margin-top: -67px;
  margin-left: 678px;
}

现在的问题是，当我调整屏幕大小时，菜单不会沿着页面移动，因为它是以像素为单位定义的。

我尝试将像素转换为百分比，但仍无法正常工作

nav#menu {
  position: absolute;
  margin-top: -5%;
  margin-left: 51.3%;
}

它仍无效。

是否可以快速轻松地将导航菜单粘贴到该位置，并且在屏幕调整大小时将其保留在那里？

提前谢谢！

Answer 1

你做错了！

1. 将图片作为背景图片，而不是实际的<img>标记。
2. 不要使用position：absolute，而只是将导航向右浮动。

Answer 2

使用ViewPort元标记

将视口的元标记用作

<meta name="viewport" content="width=device-width" />

百分比值的使用

然后，如果您使用百分比，您将获得所需的结果。例如，当您使用此css

时

body {
  width: 100%;
  height: 100%;
}

浏览器会自动更改元素的宽度和高度，具体取决于当前的屏幕尺寸！

CSS3媒体查询

要做的第三件事是使用CSS3 Media Query，怎么做？

您可以检查当前屏幕大小，然后更改CSS属性。例如：

@media (max-width: 900px) {
  /* here you will write the properties which will be visible 
   * on the devices which have max width of 900px
   */
}

然后，当您设置边距时，您将看到那里的更改。

更改边距

执行此操作的其他方法是使用top left代替margin-top和margin-left。

像这样：

nav#menu {
  position: absolute;
  top: -67px;
  left: 678px;
}

使用float而不是margin

一种简单的方法是让它向右浮动，如：

nav#menu {
  position: absolute;
  float: right;
}

这样，您将获得右侧的导航。你也不必担心利润率！

参考：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries