Div在最小化瀏覽器窗口時隱藏

Question

我們基於Container Div對齊了「Call to Action Box」div。它在正常的瀏覽器視圖中正確對齊，但問題在於當我們最小化瀏覽器窗口「call to action」div不是對用戶可見。

<div class="container"> 
<div class="PosRel"> 
      <div class="PosAbsol"> 
       <div class="MsgContainer"> 
          <div class="MsgDisplay">Call To Action</div> 
       </div> 
      </div> 
     </div> 
</div> 

CSS：

.container { 
    width: 100%; 
    margin: 0 auto; 
    vertical-align: top; 
    text-align: center; 
    font-size: 0; 
    position: relative; 
} 

.PosRel { 
    position: relative; 
} 

.PosAbsol { 
    position: absolute; 
    right: 0; 
} 

.MsgContainer { 
    position: fixed; 
    z-index: 9999; 
    opacity: 0; 
    transform: translateZ(0px); 
    transition: all 2s linear; 
} 

.MsgDisplay { 
    margin: 0px; 
    width: 200px; 
    height: 58px; 
    background-size: 100% 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: normal; 
    color: rgb(241, 241, 241); 
    text-decoration: none; 
    word-wrap: break-word; 
    z-index: 9999; 
    padding: 18px 15px; 
    font-weight: 600; 
    position: absolute; 
    right: 10px; 
} 

Answer 1

是你想要的：）

@media only screen and (max-width:1230px) and (min-width:990px){ 
// CSS code 
} 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
// CSS code 
} 
@media only screen and (max-width: 479px) { 
// CSS code 
}