Question

我试图为网站制作响应式设计。不知道如何为我使用position: absolute;

的div做到这一点

以下是我的HTML和CSS：

＆＃13;

#logo {
  position: absolute;
  left: 20px;
  top: 20px;
}
#nav {
  position: absolute;
  left: 176px;
  top: 34px;
}
#content {
  position: absolute;
  display: block;
  left: 190px;
  top: 40px;
  background: #fff;
  width: 80%;
  height: 80%;
}

＆＃13;

<div id="logo">
  <a href="index.html">
    <img src="static/gfx/logo.png">
  </a>
</div>
<div id="nav"><i class="fa fa-bars"></i>
</div>

<div id="content">asdsa</div>

＆＃13;

我已经尝试了一切，但无法弄明白。 div已修复。

Answer 1

使用媒体查询为每种分辨率设置不同的偏移量：

@media (min-resolution: 144dpi) {
 #logo {
  position: absolute;
  left: 20px; 
  top: 20px;
  }
}

@media (min-resolution: 96dpi) {
 #logo {
  position: absolute;
  left: 10px; 
  top: 10px;
  }
}

作为替代方案，相对单位（%，em等）也是一种选择。

对于响应式iframe，请使用以下过程：

指定容器的position为relative是关键。这使我们可以绝对地将iframe置于其中，这是使其响应所必需的。

padding-bottom值是根据您的内容的宽高比计算的。要查找容器的纵横比，请使用以下公式：height ÷ width = aspect ratio

height设置为0，因为padding-bottom会为iframe提供height。       使用overflow: hidden很重要，因为它可以确保任何内容是否突出到容器之外，它将被隐藏并避免搞乱网站布局。

与大多数绝对定位的元素一样，我们需要设置top和left属性，以便iframe放在正确的位置。

最后，width和height设置为100%，因此iframe占用了容器空间的100%。

<强>参考

如何为位置做出响应div：绝对

1 个答案: