是否有可能有一个绝对位置的 div，里面有固定的元素，可以响应地放大和缩小？

Question

我目前有一个位置相对的容器，里面有一个绝对位置的 div，里面有固定的 div 元素。

是否可以根据浏览器大小使位置绝对/固定 div 放大和缩小？

Answer 1

您可以使用@media CSS 在特定屏幕尺寸下更改元素类的大小值（宽度、高度、顶部、底部等）。

@media only screen and (max-width:1100px) {
    .yourClass {yourStyle: style}
    .otherClass {yourStyle: style}
}
@media only screen and (max-width:570px) {
    .yourClass {yourStyle: style}
    .otherClass {yourStyle: style}
}

Answer 2

根据您的问题，您可以使用 width:"calc" css 技巧来固定宽度；这将使自动响应运行 sn-p。这里也是现场小提琴fiddleLiveDemo

.container{
  height:100px;
  position:relative;
  border:1px solid red;
}
.div1{
  border:1px solid blue;
  background:#bbb;
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);/* 40px gap between both sides of the div and the edges of the window */
  height:80px;
  margin-top:10px;
}
.div2{
  border:1px solid yellow;
  background:red;
  position:fixed;
  left: 60px;
  width: calc(100% - 120px); /* 60px gap between both sides of the div and the edges of the window */
  height:70px;
  margin-top:5px;
}

   

<div class="container">
 <div class="div1">
  <div class="div2">

  </div>
 </div>
</div>