html - 如何为位置 : absolute 制作响应式 div

Question

我正在尝试为网站进行响应式设计。不知道如何为我使用 position: absolute;

的 div 做这件事

这是我的 HTML 和 CSS:

#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%;
}

<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>

我已经尝试了所有方法，但无法弄清楚。 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，使用以下过程:

It's key to specify the container's position to be relative. This allows us to absolutely position the iframe within it, which is needed to make it responsive.

The padding-bottom value is calculated based on the aspect ratio of your content. To find the aspect ratio of a container, use this formula: height ÷ width = aspect ratio

height is set to 0 because padding-bottom gives the iframe it’s height. Using overflow: hidden is important because it ensures if any content does protrude outside of the container, it will be hidden and avoid screwing up the sites layout.

Like with most absolutely positioned elements, we need to set the top and left properties so the iframe gets put in the right place.

Finally, width and height are set to 100% so the iframe takes up 100% of the container's space.

引用资料

• Pixel Density List

• Responsive iframes