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

根据您的问题，您可以使用宽度：＆＃34; calc＆＃34;用css技巧来修复宽度;这将提供自动响应运行代码段。这也是现场小提琴fiddleLiveDemo

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

是否有可能有一个绝对div位置，内部有固定元素，可以根据需要进行放大和缩小？

2 个答案: