有沒有可能有一個位置絕對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

根據你的問題，你可以使用寬度：「calc」css技巧來修復寬度;這將使自動響應運行該片段。下面是現場小提琴也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>